Коротка інформація Значення за замовчуванням Ні Успадковується Ні Застосовується Ко всім елементам Анімується Ні Синтаксис <code>border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset Позначення Опис Приклад <тип> Вказує тип значення. <розмір> A & ;& B Значення повинні виводитися в зазначеному порядку. <размер> && <колір> A | B Вказує,"> Коротка інформація Значення за замовчуванням Ні Успадковується Ні Застосовується Ко всім елементам Анімується Ні Синтаксис <code>border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset Позначення Опис Приклад <тип> Вказує тип значення. <розмір> A & ;& B Значення повинні виводитися в зазначеному порядку. <размер> && <колір> A | B Вказує,"> Коротка інформація Значення за замовчуванням Ні Успадковується Ні Застосовується Ко всім елементам Анімується Ні Синтаксис <code>border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset Позначення Опис Приклад <тип> Вказує тип значення. <розмір> A & ;& B Значення повинні виводитися в зазначеному порядку. <размер> && <колір> A | B Вказує,">
CSS властивості
ГлавнаяВластивості CSSАтрибут border-left-style в CSS

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

308

Встановлює стиль кордону ліворуч від елемента.

">Коротка інформація
Значення за замовчуванням Ні
Успадковується Ні
Застосовується Ко всім елементам
Анімується Ні

Синтаксис

<code>border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

Позначення

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

Значення

none
Лінія не відображається і значення її товщини обнулюється.
hidden
Має той самий ефект, що і none за винятком застосування border-left-style до осередків табл , у якої значення властивості border-collapse встановлено як collapse. У цьому випадку ліва межа в осередку не відображатиметься взагалі.
dotted
Лінія, що складається з набору точок. , що складається з серії коротких відрізків.
solid
Суцільна лінія.
double
Подвійна лінія.
groove
Створює ефект вдавленої лінії.
ridge
Створює ефект рельєфної лінії.
inset
Псевдотривимірна лінія .
outset
Псевдотривимірна лінія.

Вигляд зазначених стилів представлений на мал. 1.

Стилі рамок

<Рис.1. Стилі кордонів

Пісочниця

Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, тому що в цей час сніданок уже давно скінчився, а обід ще й не думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.
div { padding: 10px; border: 5px #fc0; border-left-style: <span class="playground-active">{{ playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-left-style</title> <style> . line { border-left-color: red; /* Колір лінії ліворуч */
border-left-style: double; /* Стиль лінії */
border-left-width: 7px; /* Товщина лінії */
padding-left: 10px; /* Відстань між лінією та текстом */
}
</style>
</head>
<body> <div class="line"> Співінтервал багатопланово продовжує контрапункт контрастних фактур, і якщо в одних голосах або пластах музичної тканини твори ще продовжуються конструктивно-композиційні процеси попередньої частини, то в інших — відбувається становлення нових.
</div>
</body>
</html>

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

Використання властивості border-left-style

Мал. 2. Використання властивості border-left-style

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

Об'єкт.style.borderLeftStyle

Примітка

Браузер Internet Explorer до версії 6.0 включно при товщині межі 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) Рекомендація

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

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

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

Браузери

4 7 12 1 3.5 1 1
1 1 6 1

Браузери

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

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