border

Оновлено: 05.12.2022

border

Універсальна властивість border дає змогу одночасно встановити товщину, стиль і колір кордону навколо елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості. Для встановлення межі тільки на певних сторонах елемента, скористайтеся властивостями border-top, border-bottom, border-left, border-right.

Коротка інформація

Значення за замовчуванням Залежить від використання
Успадковується Ні
Застосовується До всіх елементів
Анімується Так

Синтаксис

border: border-width || border-style || border-color

Значення

Значення border-width визначає товщину кордону. Для керування її виглядом надається кілька значень border-style. Їхні назви та результат дії наведено на рис. 1.

Рис.1. Стилі рамок

border-color встановлює колір кордону, значення може бути в будь-якому допустимому для CSS форматі.

Приклад

Об'єктна модель

Об'єкт.style.border

Примітка

Браузер Internet Explorer до шостої версії включно за товщини кордону 1px відображає dotted як dashed. При товщині 2px і вище значення dotted працює коректно. Цю помилку виправлено в IE7, але тільки для всіх кордонів товщиною 1px. Якщо одна з меж блоку має товщину 2px і вище, то в IE7 значення dotted перетворюється на dashed.


Стиль кордону в різних браузерах може дещо відрізнятися при використанні значень groove, ridge, inset або outset.


Браузери

border

Переглянути сумісність з Can I use?

border