Атрибут border-style в CSS

9 червня 2022 р.418

Зміст

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

="field_css_info">Коротка інформація

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

Синтаксис

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

Обоз начення

	Опис	Приклад
<тип>	Вказує тип значення.	<розмір>
A && B	Значення повинні виводитися у вказаному порядку.	<размер> && <колір>
A \| B	Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).	normal \| small-caps
A \|\| B	Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.	width \|\| count
[ ]	Групує значення.	[ crop \|\| cross ]
*	Повторювати нуль або більше разів.	[,<час>]*
+	Повторювати один або більше разів.	<число>+
?	Вказаний тип, слово або група не є обов'язковим.	inset?
{A, B}	Повторювати не менше A, але не більше B разів.	<радіус>{1,4}
#	Повторювати один або більше разів через кому.	<час>#

Значення

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

Табл. 1. Вид рамки в залежності від стилю та товщини межі елемента
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.У цьому випадку навколо осередку кордон не відображатиметься взагалі.

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

Пісочниця

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-style</title> <style> p { border-style: double; /* Стиль лінії навколо абзацу */
padding: 5px; /* Поля навколо тексту */
}
</style>
</head>
<body> <p>Розвиваючи цю тему, хрещене ходіння просвітлює міксолидійський райдер.</p>
</body>
</html>

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

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

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

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

Об'єкт.style.borderStyle

Примітка

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

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

Специфікація

Специфікація	Статус
CSS Backgrounds and Borders Module Level 3	Можлива рекомендація
CSS Level 2 Revision 1 (CSS 2.1)	Рекомендація
CSS Level 1	Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери


4	7	12	1	3.5	1	1


1	1	6	1

Браузери

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

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