Свойство CSS border-bottom-width
Используйте свойство border-bottom-width для задания ширины нижней рамки элемента. Узнайте о допустимых значениях этого CSS-свойства.
Свойство border-bottom-width задаёт ширину (толщину) нижней рамки элемента. Оно управляет только нижней стороной — чтобы оформить все четыре стороны сразу, используйте сокращённое свойство border-width.
На этой странице описывается, какие значения принимает border-bottom-width, почему без стиля рамки она остаётся невидимой, в чём разница между ключевыми словами thin/medium/thick и явными длинами, а также как это свойство соотносится с другими свойствами ширины для отдельных сторон.
Почему ширина часто ничего не показывает
Чтобы увидеть эффект border-bottom-width, необходимо также задать стиль рамки с помощью свойства border-style или border-bottom-style. Начальное значение стиля рамки — none, а рамка со стилем none никогда не отображается, независимо от заданной ширины — поэтому сама по себе ширина не даёт видимого эффекта.
/* Invisible: no style set */
.box { border-bottom-width: 10px; }
/* Visible: width + style together */
.box { border-bottom-width: 10px; border-bottom-style: solid; }Допустимые значения
Ширину можно задать двумя способами:
- Длина — любая CSS-длина, например
4px,0.25emили0.1rem. Это наиболее предсказуемый вариант, поскольку результат точно соответствует указанному значению. Отрицательные длины не допускаются и считаются недействительными. - Ключевые слова —
thin,mediumилиthick. Спецификация не определяет точную пиксельную толщину для каждого ключевого слова; конкретный результат зависит от реализации браузера. Ключевые слова всегда соответствуют соотношениюthin≤medium≤thick, и конкретное ключевое слово остаётся неизменным в пределах одного документа. В большинстве браузеров они приблизительно соответствуют1px,3pxи5px.
Если важна согласованность ширины в разных браузерах, предпочтительнее использовать явную длину, а не ключевые слова.
| Начальное значение | medium |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Да. Ширина может анимироваться. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.borderBottomWidth = "5px"; |
Синтаксис
Синтаксис свойства CSS border-bottom-width
border-bottom-width: medium | thin | thick | length | initial | inherit;Пример свойства border-bottom-width:
Пример свойства CSS border-bottom-width со значением thick
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted;
border-bottom-width: thick;
}
</style>
</head>
<body>
<p>
As you can see, we used border-bottom-width property to set the width of bottom border of this element.
</p>
</body>
</html>Результат
Пример свойства border-bottom-width со значением «medium»:
Пример свойства CSS border-bottom-width со значением medium
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
border-bottom-style: groove;
border-bottom-width: medium;
}
div {
border-style: groove;
border-bottom-width: medium;
}
</style>
</head>
<body>
<h2>A heading with a medium bottom border.</h2>
<div>A div element with a medium bottom border.</div>
</body>
</html>Пример свойства border-bottom-width, демонстрирующий разницу между значениями «thin» и «thick»:
Пример свойства CSS border-bottom-width со значением thin
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
padding: 5px;
border-bottom-style: ridge;
border-bottom-width: thin;
border-color: #cccccc;
}
div {
padding: 5px;
border-style: ridge;
border-bottom-width: thick;
}
</style>
</head>
<body>
<h2>A heading with thin bottom border</h2>
<div>A div element with thick bottom border.</div>
</body>
</html>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| medium | Задаёт среднюю нижнюю рамку. Значение по умолчанию. | Попробовать » |
| thin | Задаёт тонкую нижнюю рамку. | Попробовать » |
| thick | Задаёт толстую нижнюю рамку. | Попробовать » |
| length | Задаёт ширину нижней рамки в виде конкретного значения длины. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует значение свойства от родительского элемента. |
Связанные свойства
border-bottom-width — одно из четырёх свойств ширины для отдельных сторон. Используйте соответствующее свойство для каждой стороны или сокращённое свойство, если нужно задать несколько сразу:
- border-top-width, border-right-width, border-left-width — три оставшиеся отдельные стороны.
- border-width — сокращённое свойство, задающее ширину всех четырёх сторон одним объявлением.
- border-bottom-style и border-bottom-color — стиль и цвет той же нижней стороны.
- border-bottom — сокращённое свойство для ширины, стиля и цвета нижней стороны вместе.