Опис
Встановлює стиль границі ліворуч від елемента.
Синтаксис
border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
Значення
- none
- Лінія не відображається та її товщина обнуляється.
- hidden
- Має той же ефект, що й none, за винятком застосування border-left-style до комірок таблиці, у якої значення властивості border-collapse встановлено як collapse. У цьому випадку ліва границя в комірці взагалі не буде відображатися.
- dotted
- Лінія, що складається з набору крапок.
- dashed
- Пунктирна лінія, що складається з серії коротких відрізків.
- solid
- Суцільна лінія.
- double
- Подвійна лінія.
- groove
- Створює ефект вдавленої лінії.
- ridge
- Створює ефект рельєфної лінії.
- inset
- Псевдотривимірна лінія.
- outset
- Псевдотривимірна лінія.
- inherit
- Наслідує значення батька.
Вигляд зазначених стилів представлений на рис. 1.
Приклад
HTML5CSS2.1IECrOpSaFx
<!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">
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.
Об'єктна модель
[window.]document.getElementById("elementID").style.borderLeftStyle
Браузери
Браузер Internet Explorer до шостої версії включно при товщині границі 1px відображає dotted як dashed. При товщині 2px і більше значення dotted працює коректно. Ця помилка виправлена в IE7, але тільки для всіх границь товщиною 1px. Якщо одна з границь блоку має товщину 2px і більше, то в IE7 значення dotted перетворюється на dashed.
Internet Explorer до версії 7.0 включно не підтримує значення hidden та inherit.
Стиль границі в різних браузерах може трохи відрізнятися при використанні значень groove, ridge, inset або outset.