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

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

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

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

Синтаксис

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

Значения

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

Ссылки

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

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

Примеры

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: solid;}
		.border_2{border: dashed 2px;}
		.border_3{border: double green;}
		.border_4{border: dotted #0000FF 10px;}
	</style>
	
</head>
<body>
	<p class="border_1">
		border: solid<br>
		По умолчанию используется цвет шрифта и<br>
		border-width: medium
	</p>
	
	<p class="border_2">
		border: dashed 2px<br>
		По умолчанию используется цвет шрифта<br> 
	</p>
	
	<p class="border_3">
		border: double green<br>
		По умолчанию: border-width: medium
	</p>
	
	<p class="border_4">
		border: dotted #0000FF 5px 
	</p>	
	
</body>
</html>

Пример №1