| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+> | 1.0+ | 1.0+ | 1.0+ |
Коротка інформація
| Значення за замовчуванням | Залежить від використання |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/box.html#propdef-border |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Універсальне властивість border дозволяє одночасно встановити товщину, стиль і колір межі навколо елемента. Значення можуть йти в будь-якому порядку, розділяючись пробілом, браузер сам визначить, яке з них відповідає потрібній властивості. Для встановлення межі тільки на певних сторонах елемента, скористайтеся властивостями border-top, border-bottom, border-left, border-right.
Синтаксис
border: [border-width || border-style || border-color] | inherit
Значення
Значення border-width визначає товщину межі. Для управління її виглядом надається кілька значень border-style. Їх назви і результат дії представлено на рис. 1.
Рис.1. Стилі рамок
border-color встановлює колір межі, значення може бути в будь-якому допустимому для CSS форматі.
inherit успадковує значення батька.
Приклад
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
<style>
.brd {
border: 4px double black; /* Параметри межі */
background: #fc3; /* Колір фону */
padding: 10px; /* Поля навколо тексту */
}
</style>
</head>
<body>
<div class="brd">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>У цьому прикладі навколо шару додається подвійна межа. Результат показаний на рис. 2.
Рис. 2. Застосування властивості border
Об'єктна модель
[window.]document.getElementById("elementID").style.border
Браузери
Браузер Internet Explorer до шостої версії включно при товщині межі 1px відображає dotted як dashed. При товщині 2px і вище значення dotted працює коректно. Ця помилка виправлена в IE7, але тільки для всіх меж товщиною 1px. Якщо одна з меж блоку має товщину 2px і вище, то в IE7 значення dotted перетворюється в dashed.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.
Стиль межі в різних браузерах може трохи відрізнятися при використанні значень groove, ridge, inset або outset.