CSS :: Свойство border-left

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

Характеристики

Значение по умолчанию: см. каждое свойство.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: см. каждое свойство.
JavaScript: object.style.borderLeft="value".

Синтаксис

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

Значения

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

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-border-shorthands

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/border-left

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		color: red;
		background-color: yellow;
		}
		
		.border_1{
		border-left: solid;
		border-right: solid;
		border-top: solid;
		border-bottom: solid;
		}
		
		.border_2{
		border-left: dashed 2px;
		border-right: dashed 2px;
		border-top: dashed 2px;
		border-bottom: dashed 2px;	
		}
		
		.border_3{
		border-left: double green;
		border-right: double green;
		border-top: double green;
		border-bottom: double green;		
		}
		
		.border_4{
		border-left: dotted #0000FF 10px;
		border-right: dotted #0000FF 10px;
		border-top: dotted #0000FF 10px;
		border-bottom: dotted #0000FF 10px;		
		}
		
		/* Каждую границу оформляем по-разному */
		.border_5{
		border-left: solid;
		border-right: dashed 2px;
		border-top: double green;
		border-bottom: dotted #0000FF 10px;		
		}		
		
	</style>
	
</head>
<body>
	<p class="border_1">
		border-left: solid<br>
		border-right: solid<br>
		border-top: solid<br>
		border-bottom: solid<br>
		По умолчанию используется цвет шрифта и<br>
		значение ширины границ medium
	</p>
	
	<p class="border_2">
		border-left: dashed 2px<br>
		border-right: dashed 2px<br>
		border-top: dashed 2px<br>
		border-bottom: dashed 2px<br>
		По умолчанию используется цвет шрифта 
	</p>
	
	<p class="border_3">
		border-left: double green<br>
		border-right: double green<br>
		border-top: double green<br>
		border-bottom: double green<br>
		По умолчанию ширина границ принимается за medium
	</p>
	
	<p class="border_4">
		border-left: dotted #0000FF 10px<br>
		border-right: dotted #0000FF 10px<br>
		border-top: dotted #0000FF 10px<br>
		border-bottom: dotted #0000FF 10px 
	</p>
	
	<p class="border_5">
		border-left: solid<br>
		border-right: dashed 2px<br>
		border-top: double green<br>
		border-bottom: dotted #0000FF 10px<br>
		Каждую границу оформили по-разному		
	</p>
	
</body>
</html>

Пример №1