border - style

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Помилка | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

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

CSS | CSS1
Значення за умовчанням | none
Наслідує | Ні
Застосовується | До усіх елементів
Аналог HTML | <img border > | <table border>
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/box.html#propdef - border - style

Опис

Встановлює стиль межі навколо елементу. Допустимо задавати індивідуальні стилі для різних сторін елементу.

Синтаксис

border - style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit

Значення

Для управління видом межі надається декілька значень властивості border - style. Вид залежить від використовуваного браузеру і заданої товщини межі. У таблиці. 1 приведені назви стилів і отримувана рамка при різних значеннях товщини - 1, 3, 5 і 7 пікселів.

Таблиця. 1. Вид рамки залежно від стилю і товщини межі елементу

Окрім перерахованих в таблиці значень використовуються наступні ключові слова.

none Не відображає межу і її товщина (border - width) задається нульовій.

hidden Має той же ефект, що і none за винятком застосування border - style до елементів таблиці, у якої значення властивості border, - collapse встановлене як collapse. В цьому випадку навколо осередку межа не відображатиметься взагалі.

inherit Наслідує значення батька.

Дозволяється використовувати одно, два, три або чотири значення, розділяючи їх між собою пропуском. Ефект залежить від кількості і вказаний в таблиці. 2.

Таблиця. 2. Залежність результату використання від числа значень
Число значень | Результат
1 | Стиль межі буде заданий для усіх сторін елементу.
2 | Перше значення встановлює стиль верхньої і нижньої межі, друге - лівою і правою.
3 | Перше значення задає стиль верхньої межі, друге - одночасно лівої і правої межі, а третє - нижньої межі.
4 | По черзі встановлюється стиль верхньої, правої, нижньої і лівої межі.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>border - style</title>

<style type="text/css">

P {

border-style: double; /* Стиль лінії навколо параграфа */

padding: 5px; /* Полів навколо тексту */

}

</style>

</head>

<body>

<p>Луцький національний технчний університет є одним із найкращих професійних закладів освіти у місті Луцьку</p>

</body>

</html>

Результат цього прикладу показаний ні мал. 1.

Мал. 1. Застосування властивості border - style

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

[window.]document.getElementById("elementID").style.borderStyle

Браузери

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

Internet Explorer до сьомої версії включно не підтримує значення hidden і inherit.

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