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