border-left-width
Internet Explorer |
Chrome |
Opera |
Safari |
Firefox |
Android |
iOS |
|
6.0+ |
8.0+ |
1.0+ |
3.5+ |
1.0+ |
1.0+ |
1.0+ |
1.0+ |
Краткая информация
Значение по умолчанию |
medium |
Наследуется |
Нет |
Применяется |
Ко всем элементам |
Ссылка на спецификацию |
http://www.w3.org/TR/CSS21/box.html#border-width-properties |
Версии CSS
CSS 1 |
CSS 2 |
CSS 2.1 |
CSS 3 |
|
|
|
+ |
Описание
Устанавливает толщину границы слева от элемента.
Синтаксис
border-left-width: значение | thin | medium | thick | inherit
Значения
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселах или других единицах.
inherit
Наследует значение родителя.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> border-left-width </title>
<style>
.line {
border-left-color: red;/* Цвет линии слева */
border-left-style: double;/* Стиль линии */
border-left-width: thick;/* Толщина линии */
padding-left: 10px;/* Расстояние от левого края до линии */
}
</style>
</head>
<body>
<div class="line">
<h3>Обратите внимание!</h3>
<p>В наши расчеты не входит задача взорвать весь город, поэтому
будьте аккуратнее, когда начнете пересыпать ядерное топливо
из мешка. Чтобы не загрязнить комнату, не забудьте положить
на пол газету.</p>
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Использование свойства border-left-width
Объектная модель
[window.]document.getElementById("elementID").style.borderLeftWidth
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.
Internet Explorer до версии 7.0 включительно не поддерживает значение hidden и inherit.
Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.
Категория: Контуры и границы