Опис
Встановлює стиль межі навколо елемента. Можна встановити індивідуальні стилі для різних сторін елемента.
Синтаксис
border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit
Значення
Для керування виглядом межі надається кілька значень властивості border-style. Вигляд залежить від використаного браузера та вказаної товщини межі.
Крім перерахованих у таблиці значень використовуються наступні ключові слова.
- none
- Не відображає межу, і її товщина (border-width) встановлюється як нульова.
- hidden
- Має той же ефект, що і none, за винятком застосування border-style до комірок таблиці зі значенням властивості border-collapse, що встановлено як collapse. У цьому випадку навколо комірки межа не буде взагалі відображатися.
- inherit
- Наслідує значення батька.
Дозволяється використовувати одне, два, три або чотири значення, розділяючи їх пробілом.
| Кількість значень | Результат |
|---|---|
| 1 | Стиль межі буде встановлено для всіх сторін елемента. |
| 2 | Перше значення встановлює стиль верхньої і нижньої межі, друге – лівої і правої. |
| 3 | Перше значення задає стиль верхньої межі, друге – одночасно лівої і правої межі, а третє – нижньої межі. |
| 4 | Послідовно встановлюється стиль верхньої, правої, нижньої та лівої меж. |
Об'єктна модель
[window.]document.getElementById("elementID").style.borderStyle
Браузери
Браузер Internet Explorer до шостої версії включно при товщині межі 1px відображає dotted як dashed. При товщині 2px і більше значення dotted працює коректно. Ця помилка виправлена в IE7, але лише для всіх меж товщиною 1px. Якщо одна з меж блоку має товщину 2px і більше, то в IE7 значення dotted перетворюється в dashed.
Internet Explorer до версії 7.0 включно не підтримує значень hidden та inherit.
Стиль межі в різних браузерах може трохи відрізнятися при використанні значень groove, ridge, inset або outset.