| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0 + | 8.0 + | 1.0 + | 3.5 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
Коротка інформація
| Значення за умовчанням | none |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/box.html#propdef-border-style |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Встановлює стиль межі навколо елемента. Припустимо задавати індивідуальні стилі для різних сторін елемента.
Синтаксис
border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit
Значення
Для управління видом межі надається кілька значень властивості border-style . Вигляд залежить від використовуваного браузера і заданої товщини межі. У табл. 1 наведені назви стилів і отримується рамка при різних значеннях товщини — 1, 3, 5 і 7 пікселів.
| 1 піксель | 3 пікселя | 5 пікселів | 7 пікселів |
|---|---|---|---|
| dotted | dotted | dotted | dotted |
| dashed | dashed | dashed | dashed |
| solid | solid | solid | solid |
| double | double | double | double |
| groove | groove | groove | groove |
| ridge | ridge | ridge | ridge |
| inset | inset | inset | inset |
| outset | outset | outset | outset |
Крім перерахованих в таблиці значень використовуються наступні ключові слова.
- none
- Чи не відображає межу і її товщину ( border-width ) задається нульовий.
- hidden
- Має той же ефект, що і none за винятком застосування border-style до осередків таблиці, у якій значення властивості border-collapse встановлено як collapse . У цьому випадку навколо комірки рамка не буде відображатися взагалі.
- inherit
- Успадковує значення батька.
дозволив ється використовувати одне, два, три або чотири значення, поділяючи їх між собою пробілом. Ефект залежить від кількості і вказано в табл. 2.
| Число значень | Результат |
|---|---|
| 1 | стиль межі буде поставлено для всіх сторін елемента. |
| 2 | Перше значення встановлює стиль верхньої і нижньої межі, друге — лівої і правої. |
| 3 | Перше значення задає стиль верхньої межі, друге — одночасно лівою і правою межі, а третє — нижньої межі. |
| 4 | По черзі встановлюється стиль верхньої, правої, нижньої і лівої межі. |
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
border-style </title>
<style>
p {border-style: double; /* Стиль лінії навколо параграфа */ padding: 5px; /* Поля навколо тексту */ } </style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p>
</body>
</html>
Результат даного прикладу показаний на рис. 1.
Об'єктна модель
[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 .