border-width

Властивість-скорочення CSS border-width задає ширину меж елемента.

Спробуйте його в дії

Властивості-складові

Ця властивість є скороченням наступних властивостей CSS:

Синтаксис

/* Значення – ключові слова */
border-width: thin;
border-width: medium;
border-width: thick;

/* Значення <length> */
border-width: 4px;
border-width: 1.2rem;

/* верх і низ | ліво та право */
border-width: 2px 1.5em;

/* верх | ліво та право | низ */
border-width: 1px 2em 1.5cm;

/* верх | право | низ | ліво */
border-width: 1px 2em 0 4rem;

/* Глобальні значення */
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, і в межах одного документу їхні значення є сталими.

Формальне визначення

Початкове значеннятак як і всі інші властивості зі скорочення:
Успадковуєтьсяні
Обчислене значеннятак як і всі інші властивості зі скорочення:

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

<line-width>{1,4}

де
<line-width> = <length> | thin | medium | thick

Приклади

Суміш ключових слів і ширин

HTML

<p id="one-value">одне значення: межі 6px завширшки з усіх 4 сторін</p>
<p id="two-values">
  два різні значення: межі 2px завширшки згори та знизу, 10px завширшки справа
  та зліва
</p>
<p id="three-values">
  три різні значення: межі 0.3em завширшки згори, 9px завширшки знизу та
  нульової ширини справа та зліва
</p>
<p id="four-values">
  чотири різні значення: "thin" згори, "medium" справа, "thick" знизу та 1em
  завширшки зліва
</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;
}

Результат

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
border-width
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 2
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 3
Samsung Internet Full support 1.0

Дивіться також