Свойство CSS border-bottom-color
Свойство CSS border-bottom-color используется для задания цвета нижней границы элемента.
Сначала необходимо определить свойства border-style или border-bottom-style, поскольку у элемента должна быть граница, прежде чем вы сможете изменить её цвет.
Цвет нижней границы также можно задать с помощью сокращённого свойства border-color.
| Начальное значение | currentColor |
|---|---|
| Применяется ко | Всем элементам. |
| Наследуется | Нет |
| Анимация | Да. Цвет нижней границы анимируется. |
| Версия | CSS1. |
| Синтаксис DOM | object.style.borderBottomColor = "blue"; |
Синтаксис
Синтаксис свойства CSS border-bottom-color
border-bottom-color: color | transparent | initial | inherit;Пример свойства border-bottom-color:
Пример использования свойства CSS border-bottom-color со значением цвета
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: solid;
border-bottom-color: #1c87c9;
border-bottom-width: 5px;
}
</style>
</head>
<body>
<h2> A heading with a solid blue bottom border</h2>
</body>
</html>Результат
Пример свойства border-bottom-color, где цвета добавляются к различным HTML-элементам для демонстрации эффекта:
Пример использования свойства CSS border-bottom-color вместе с border-style
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: groove;
border-bottom-color: #8ebf42;
border-bottom-width: 5px;
}
div {
border-style: inset;
border-bottom-color: #ccc;
border-bottom-width: 8px;
}
p {
border-style: double;
border-bottom-color: #1c87c9;
border-bottom-width: 8px;
}
</style>
</head>
<body>
<h2>A heading with a groove green bottom border.</h2>
<div>A div element with an inset gray bottom border.</div>
<p>A paragraph with a double blue border.</p>
</body>
</html>Пример свойства border-bottom-color со значением «transparent»:
Пример использования свойства CSS border-bottom-color со значением transparent
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: #666 dashed;
border-bottom-color: transparent;
padding: 8px;
}
</style>
</head>
<body>
<h2>Example of transparent border-bottom-color</h2>
<div>This is an example of a div element which has a transparent border-bottom-color.</div>
</body>
</html>В качестве значения для свойства border-bottom-color можно задать шестнадцатеричный код, RGB, RGBA, HSL, HSLA или название цвета.
TIP
Подробнее об цветах в HTML.
Пример свойства border-bottom-color со значением «color»:
Пример использования свойства CSS border-bottom-color со значениями шестнадцатеричного кода, RGB, HSL и названия цвета
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid #666;
width: 60%;
padding: 5px;
}
.name {
border-bottom-color: lightblue;
}
.hex {
border-bottom-color: #1c87c9;
}
.rgb {
border-bottom-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-bottom-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Bottom border with a named color.</p>
<p class="hex">Bottom border with a hexadecimal value.</p>
<p class="rgb">Bottom border with a RGB color value.</p>
<p class="hsl">Bottom border with a HSL color value.</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| color | Указывает цвет нижней границы. Цвет по умолчанию — цвет элемента. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). Обязательное значение. | Запустить » |
| transparent | Указывает, что цвет границы должен быть прозрачным. Нижняя граница всё равно займёт пространство, определённое значением border-width. | Запустить » |
| initial | Устанавливает свойству значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что делает свойство 'border-bottom-color' в CSS?