Свойство CSS `border-bottom-width`
Базовая поддержка Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
Свойство border-bottom-width CSS задаёт ширину нижней границы элемента.
Попробуйте
border-bottom-width: thick;
border-bottom-width: 2em;
border-bottom-width: 4px;
border-bottom-width: 2ex;
border-bottom-width: 0;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: palegreen;
color: black;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
Синтаксис
/* Keyword values */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* <length> values */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* Global keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: revert; border-bottom-width: revert-layer; border-bottom-width: unset;
Значения
-
<line-width> - Задаёт ширину границы: неотрицательным значением
<length>или одним из ключевых слов:thin,mediumилиthick. Значение по умолчанию —medium.
Формальное определение
| Исходное значение | medium |
|---|---|
| Применяется к | всем элементам |
| Наследуется | нет |
| Вычисленное значение | абсолютное <length>, округлённое до ширины линии |
| Тип анимации | a <a href="/en-US/docs/Web/CSS/Reference/Values/length#interpolation" title="Значения типа данных CSS <length> интерполируются как вещественные числа с плавающей точкой.">length</a> |
Формальный синтаксис
border-bottom-width = <line-width> <line-width> = <length> | thin | medium | thick
Примеры
Сравнение ширины нижней границы
HTML
<div>Element 1</div> <div>Element 2</div>
CSS
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-bottom-width: thick;
}
div:nth-child(2) {
border-bottom-width: 2em;
}
Результат
Спецификации
| Спецификация |
|---|
| Модуль CSS «Фоны и границы», уровень 3 # border-width |
Совместимость с браузерами
| Настольные компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari на iOS | Samsung Internet | WebView для Android | WebView на iOS | |
border-bottom-width |
1 |
12 |
1 |
3.5 |
1 |
18 |
4 |
10.1 |
1 |
1.0 |
2.2 |
1 |
medium |
1 |
12 |
1 |
15 |
1 |
18 |
4 |
14 |
1 |
1.0 |
4.4 |
1 |
thick |
1 |
12 |
1 |
15 |
1 |
18 |
4 |
14 |
1 |
1.0 |
4.4 |
1 |
thin |
1 |
12 |
1 |
15 |
1 |
18 |
4 |
14 |
1 |
1.0 |
4.4 |
1 |
См. также
- Другие свойства CSS, связанные с шириной границы:
border-left-width,border-right-width,border-top-widthиborder-width. - Другие свойства CSS, связанные с нижней границей:
border,border-bottom,border-bottom-styleиborder-bottom-color.
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-bottom-width
