border-width

Baseline Широко распространённый

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

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

Попробуйте

Составные свойства

Это свойство является сокращением следующих свойств CSS:

Синтаксис

/* Keyword values */
border-width: thin;
border-width: medium;
border-width: thick;

/* <length> values */
border-width: 4px;
border-width: 1.2rem;

/* top and bottom | left and right */
border-width: 2px 1.5em;

/* top | left and right | bottom */
border-width: 1px 2em 1.5cm;

/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;

/* Global values */
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;

Свойство border-width может быть задано с использованием одного, двух, трёх или четырёх значений.

При использовании одного значения, одинаковая ширина применяется ко всем четырём сторонам.
При использовании двух значений, первое значение задаёт ширину верхней и нижней границ, а второе — левой и правой.
При использовании трёх значений, первое значение задаёт ширину верхней границы, второе — левой и правой, а третье — нижней.
При использовании четырёх значений, ширина задаётся для верхней, правой, нижней и левой границ в указанном порядке (по часовой стрелке).

Значения

<line-width>

Определяет ширину границы, в виде явного неотрицательного <length> или ключевого слова. Если используется ключевое слово, оно должно быть одним из следующих:

thin
medium
thick

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

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

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

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

border-width = 
  <line-width>{1,4}  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

Примеры

Смесь значений и длин

HTML

<p id="one-value">one value: 6px wide border on all 4 sides</p>
<p id="two-values">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="three-values">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="four-values">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  left
</p>

CSS

#one-value {
  border: ridge #ccc;
  border-width: 6px;
}
#two-values {
  border: solid red;
  border-width: 2px 10px;
}
#three-values {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#four-values {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}

Результат

Спецификации

Спецификация
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-width`	1	12	1	3.5	1	18	4	10.1	3	1.0	2

См. также

Связанные свойства сокращенной записи: border, border-style, border-color
Свойства, связанные с шириной границы: border-bottom-width, border-left-width, border-right-width, border-top-width

© 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-width