Свойство CSS border-bottom-width
Свойство border-bottom-width задаёт толщину нижней границы.
Чтобы увидеть эффект от border-bottom-width, необходимо также задать border-style или border-bottom-style. Без указания стиля границы ширина не будет иметь видимого эффекта.
Спецификация не определяет точную толщину для каждого ключевого слова; точный результат зависит от реализации браузера. Однако они всегда подчиняются правилу thin ≤ medium ≤ thick, а значения остаются постоянными в пределах одного документа.
| Начальное значение | 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 | Наследует значение свойства от родительского элемента. |
Practice
Какие из следующих значений принимает свойство border-bottom-width в CSS?