border-left

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

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

Значение по умолчанию	Зависит от использования
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Дополнительно следует прописывать альтернативное свойство для браузера Mozila -moz-border-left-colors.Свойство применимо ко всем элементам, создано в версии CSS1, но проходит валидацию согласно версии CSS3.

Синтаксис

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

Значения

Значение border-width определяет толщину границы.

Для управления ее видом предоставляется несколько значений свойства border-style.

Их названия и результат действия представлен на рисунке

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

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

inherit наследует значение родителя.

Пример 1

HTML5CSS2.1IECrOpSaFx

<!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 применения свойства

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-clor</title>
<style type="text/css">
<!--
#color {
border-left-width:40px;
border-left-style:dotted;
border-left-color:#0ba1d5;
background:grey;
padding:40px;
color:white;
font-size:20px;
}
-->
</style>
</head>
<body>
<div id="color">Применён стиль для левой границы</div>
</body>
</html>

Примеры 1 и 2 в действии

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

[window.]document.getElementById("elementID").style.borderLeft

Браузеры

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

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

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

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Границы | Добавил: evkuriy (04.07.2013)

Просмотров: 512 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]