свойство border-leftCSS3-генератор ☛

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

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

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

Синтаксис ?

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

✖

Обозначения

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

Значения

Значение 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>

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

Объект.style.borderLeft

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

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

Браузеры: Настольные Мобильные ?

Internet Explorer		Chrome	Opera	Safari	Firefox
4	7	1	3.5	1	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	6	1

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Границы

См. также