border-bottom-width

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство border-bottom-width CSS задаёт ширину нижней границы элемента.

Попробовать

Синтаксис

/* 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

Примечание: Поскольку спецификация не определяет точную толщину, обозначаемую каждым ключевым словом, точный результат при использовании одного из них зависит от реализации. Тем не менее, они всегда следуют схеме thin ≤ medium ≤ thick, а значения являются постоянными в пределах одного документа.

Формальное определение

Начальное значение	`medium`
Применяется к	всем элементам. Также применяется к `::first-letter`.
Наследуется	нет
Вычисленное значение	абсолютная длина или `0` если `border-bottom-style` равно `none` или `hidden`
Тип анимации	длина

Формальный синтаксис

border-bottom-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  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 Backgrounds and Borders Module Level 3 # the-border-width

Совместимость браузеров

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`border-bottom-width`	1	12	1	3.5	1	18	4	10.1	1	1.0	2.2

END_OF_DOCUMENT_MARKER

См. также

Другие CSS свойства, связанные с шириной границы: border-left-width, border-right-width, border-top-width и border-width.
Другие CSS свойства, связанные с нижней границей: border, border-bottom, border-bottom-style и border-bottom-color.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width