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

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

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

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

Синтаксис

border-color: [<цвет> | transparent] {1,4}

Значения

цвет – любое допустимое в CSS значение цвета.
transparent – делает границу прозрачной (бесцветной), при этом сама граница остается, влияя на размеры элемента.

При этом разрешается указывать через пробел одно, два, три или четыре значения:

одно значение – цвет задается для всех четырех сторон элемента;
два значения – первое значение задает цвет верхней и нижней границы элемента, второе – правой и левой;
три значения – первое значение задает цвет верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
четыре значения – цвет границ устанавливается по часовой стрелке: для верхней границы, затем правой, нижней и левой.

Ссылки

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

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

Примеры

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;
		border: solid 15px;
		}
		
		/* Четыре значения */
		.border_1{
		border-color: #00FF00 blue rgb(255,0,0) black;
		}
				
		/* Три значения */
		.border_2{
		border-color: red #0000FF rgba(0,255,0,0.7);		
		}
		
		/* Два значения */
		.border_3{
		border-color: #0000FF hsl(120,100%,50%);		
		}
		
		/* Одно значение */
		.border_4{
		border-color: hsla(240,100%,50%,0.5);		
		}		
		
	</style>
	
</head>
<body>
	<p class="border_1">
		Четыре значения<br>
		border-color: #00FF00 blue rgb(255,0,0) black;
	</p>
	
	<p class="border_2">
		Три значения<br>
		border-color: red #0000FF rgba(0,255,0,0.7);
	</p>
	
	<p class="border_3">
		Два значения<br>
		border-color: #0000FF hsl(120,100%,50%);
	</p>
	
	<p class="border_4">
		Одно значение<br>
		border-color: hsla(240,100%,50%,0.5);
	</p>
		
</body>
</html>

Пример №1