Задає товщину кордону одночасно на всіх сторонах елемента або індивідуально для кожної сторони. Спосіб зміни товщини залежить від кількості значень.
| Значення за замовчуванням | medium |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Так |
Синтаксис
<code>border-width: [<размер> | thin | medium | thick] {1,4} Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися у вказаному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
Три змінні — thin (2 пікселі), medium (4 пікселі) та thick ( 6 пікселів) задають товщину межі. Для більш точного значення товщину можна вказувати в пікселях або інших одиницях. Ефект залежить від кількості та наведено в табл. 1.
| Кількість значень | Результат |
|---|---|
| 1 | Товщина кордону буде встановлена для всіх сторін елемента. |
| 2 | Перше значення встановлює товщину верхньої та нижньої меж, друге ;— лівої та правої. |
| 3 | Перше значення задає товщину верхньої межі, друге — одночасно лівої та правої меж, а третє— нижньої межі. |
| 4 | По черзі встановлюється товщина верхньої, правої, нижньої та лівої меж. |
Пісочниця
div { background: #e4efc7; border: dotted #333; padding: 10px; border-width: <span class="playground-active">{{ playgroundValue }}px</span>; }Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-width</title> <style> p { border-style: double; /* Стиль рамки навколо параграфа */
border-width: 3px 7px 7px 4px; /* Товщина кордону */
padding: 7px; /* Поля навколо тексту */
}
</style>
</head>
<body> <p>Кластерне вібрато є хроматичним алеаторично побудованим нескінченним каноном з полізеркальною векторно-голосовою структурою.</p>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Застосування властивості border-width
Об'єктна модель
Об'єкт.style.borderWidth
Примітка
Браузер Internet Explorer до шостої версії включно при товщині межі 1px відображає dotted як dashed. При товщині 2px та вище значення dotted працює коректно. Ця помилка виправлена в IE7, але тільки для всіх меж товщиною 1px. Якщо одна з меж блоку має товщину 2px і вище, то в IE7 значення dotted перетворюється на dashed.
Товщина кордону при використанні ключових слів thin, medium та thick у різних браузерах може дещо відрізнятися.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Backgrounds and Borders Module Level 3 | Можлива рекомендація |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендація |
| CSS Level 1 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 4 | 8 | 12 | 1 | 9.2 | 1 | 1 |
| 1 | 1 | 6 | 1 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.