border-left

Свойство border-left позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

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

Значение по умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис

border-left: border-left-width || border-left-style || border-left-color

Значения

Значение border-left-width определяет толщину границы. Для управления её видом предоставляется несколько значений свойства border-left-style. Их названия и результат действия представлен на рис. 1.

Стили рамок

Рис.1. Стили рамок

border-left-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-left</title>
  <style>
   .line {
    border-left: 2px dotted green; /* Линия слева от текста */
    padding-left: 10px; /* Расстояние между линией и текстом */
    margin-left: 10px; /* Расстояние от левого края до линии */
   }
  </style>
 </head>
 <body> 
  <div class="line">Еще Аристотель в своей «Политике» говорил, 
   что музыка, воздействуя на человека, доставляет «своего рода 
   очищение, то есть облегчение, связанное с наслаждением», 
   однако арпеджио монотонно выстраивает изоритмический флэнжер. 
   Ощущение мономерности ритмического движения возникает, 
   как правило, в условиях темповой стабильности, тем не 
   менее микрохроматический интервал неустойчив.
  </div>
 </body>
</html>

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

Применение свойства border-left

Рис. 2. Применение свойства border-left

Объектная модель

Объект.style.borderLeft

Примечание

Браузер 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 Level 1 Рекомендация

Браузеры

4 7 12 1 3.5 1 1
1 1 6 1
Границы