Свойство CSS border-bottom
CSS border-bottom задаёт ширину, стиль и цвет нижней рамки элемента одним объявлением. Синтаксис, значения и примеры.
Свойство border-bottom — это сокращённое CSS-свойство, которое задаёт ширину, стиль и цвет нижней рамки элемента в одном объявлении. Вместо трёх отдельных полных свойств можно задать их все сразу:
/* Longhand — three declarations */
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #1c87c9;
/* Shorthand — one declaration, same result */
border-bottom: 3px solid #1c87c9;На этой странице рассматриваются синтаксис, допустимые значения, рабочие примеры и наиболее распространённая ошибка (отсутствующий стиль), из-за которой рамка не отображается.
Как ведут себя значения
Три значения можно указывать в любом порядке, однако рекомендуемый порядок: ширина, стиль, цвет. Любое пропущенное значение заменяется значением по умолчанию:
- Ширина не указана → по умолчанию
medium(примерно 3px в большинстве браузеров). - Цвет не указан → по умолчанию
currentColor, то есть цвет текста элемента. - Стиль не указан → по умолчанию
none, что означает рамка вообще не отображается.
Последний пункт является главной причиной того, что border-bottom «не работает»: без border-style браузер ничего не рисует, какими бы ни были ширина или цвет.
/* Renders nothing — no style given */
.no-border { border-bottom: 5px #1c87c9; }
/* Renders a 5px blue solid line */
.works { border-bottom: 5px solid #1c87c9; }Когда использовать border-bottom
Используйте border-bottom, когда нужна линия только с одной стороны элемента, а не полная рамка. Распространённые случаи:
- Подчёркнутые заголовки или разделители секций — жирная цветная линия под элементом
<h2>. - Индикаторы вкладок и навигации — выделение активной ссылки нижней рамкой.
- Поля ввода — стиль «Material Design» использует только нижнюю рамку вместо полной.
Если нужна одинаковая рамка со всех четырёх сторон, используйте сокращённое свойство border. Для других отдельных сторон см. border-top, border-left и border-right.
| Начальное значение | medium none currentColor |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимируемое | Да. Цвет и ширина border-bottom поддерживают анимацию. |
| Версия | CSS1 |
| DOM Синтаксис | object.style.borderBottom = "15px dotted blue"; |
Синтаксис
Синтаксис свойства CSS border-bottom
border-bottom: border-width | border-style | border-color | initial | inherit;Пример свойства border-bottom:
Пример CSS border-bottom со значением groove
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 8px groove #1c87c9;
}
</style>
</head>
<body>
<h2>A heading with a groove blue bottom border.</h2>
</body>
</html>Результат
Пример использования свойства border-bottom с элементами <h2>, <p> и <div>:
Пример CSS border-bottom со значениями dashed, double и ridge
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 5px dashed #1c87c9;
}
p {
border-bottom: 8px double #8ebf42;
}
div {
border-bottom: 10px ridge #ccc;
}
</style>
</head>
<body>
<h2>A heading with a dashed blue bottom border.</h2>
<p>A paragraph with a double green bottom border.</p>
<div>A div element with a ridge gray bottom border.</div>
</body>
</html>Результат
Значения
| Значение | Описание |
|---|---|
| border-bottom-style | Задаёт стиль нижней рамки. Значение по умолчанию — "none". |
| border-bottom-width | Задаёт ширину нижней рамки. Значение по умолчанию — "medium". |
| border-bottom-color | Задаёт цвет нижней рамки. Значение по умолчанию — цвет текста. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
border— сокращённое свойство для всех сторон.border-top,border-left,border-right— сокращённые свойства для других отдельных сторон.border-bottom-width,border-bottom-style,border-bottom-color— три полных свойства, которые раскрываетborder-bottom.border-style,border-width,border-color— управление всеми четырьмя сторонами сразу по каждому аспекту.