Свойство CSS border-bottom
Свойство border-bottom является сокращённым свойством для определения ширины, стиля и цвета нижней границы. Значения можно переставлять, но рекомендуемый порядок: ширина, стиль, затем цвет. Обратите внимание, что border-style является обязательным для отображения границы; без неё граница не появится независимо от цвета или ширины.
Если ширина не указана, по умолчанию используется medium. Если цвет не указан, наследуется цвет родительского элемента. Если стиль не указан, граница не отобразится.
| Начальное значение | medium none currentColor |
|---|---|
| Применяется к | Ко всем элементам. |
| Наследуется | Нет. |
| Анимация | Да. Цвет и ширина border-bottom анимируются. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.borderBottom = "15px dotted blue"; |
Синтаксис
Синтаксис свойства CSS border-bottom
css
border-bottom: border-width | border-style | border-color | initial | inherit;Пример свойства border-bottom:
Пример свойства CSS border-bottom со значением groove
html
<!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
html
<!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 | Наследует свойство от родительского элемента. |
Практика
Что делает свойство CSS 'border-bottom'?