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}
Приклади
Суміш ключових слів і ширин
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |
Дивіться також
- Властивості-скорочення, котрі стосуються меж:
border
,border-style
,border-color
- Властивості, котрі стосуються ширини меж:
border-bottom-width
,border-left-width
,border-right-width
,border-top-width