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

css-свойство border-bottom-color (от англ. bottom border color – цвет нижней границы) используется для установки цвета нижней границы элемента.

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

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

Синтаксис

border-bottom-color: <цвет> | transparent

Значения

цвет – любое допустимое в 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-bottom-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;
		background-color: yellow;
		}
		
		/* Цвета границ через слова */
		.border_1{
		border-left-color: black;
		border-right-color: red;
		border-top-color: green;
		border-bottom-color: blue;
		}

		/* Цвета границ в rgb */
		.border_2{
		border-left-color: #000000;
		border-right-color: #FF0000;
		border-top-color: #00FF00;
		border-bottom-color: #0000FF;	
		}
		
		/* Цвета границ в rgba */
		.border_3{
		border-left-color: rgba(0,0,0,0.7);
		border-right-color: rgba(255,0,0,0.7);
		border-top-color: rgba(0,255,0,0.7);
		border-bottom-color: rgba(0,0,255,0.7);		
		}
		
		/* Цвета границ в hsl */
		.border_4{
		border-left-color: hsl(0,0%,0%);
		border-right-color: hsl(0,100%,50%);
		border-top-color: hsl(120,100%,50%);
		border-bottom-color: hsl(240,100%,50%);		
		}
		
		/* Цвета границ в hsla */
		.border_5{
		border-left-color: hsla(0,0%,0%,0.5);
		border-right-color: hsla(0,100%,50%,0.5);
		border-top-color: hsla(120,100%,50%,0.5);
		border-bottom-color: hsla(240,100%,50%,0.5);		
		}		
		
	</style>
	
</head>
<body>
	<p class="border_1">
		Цвета границ через слова<br>
		border-left-color: black;<br>
		border-right-color: red;<br>
		border-top-color: green;<br>
		border-bottom-color: blue;
	</p>
	
	<p class="border_2">
		Цвета границ в rgb<br>
		border-left-color: #000000;<br>
		border-right-color: #FF0000;<br>
		border-top-color: #00FF00;<br>
		border-bottom-color: #0000FF;
	</p>
	
	<p class="border_3">
		Цвета границ в rgba<br>
		border-left-color: rgba(0,0,0,0.7);<br>
		border-right-color: rgba(255,0,0,0.7);<br>
		border-top-color: rgba(0,255,0,0.7);<br>
		border-bottom:-color rgba(0,0,255,0.7);
	</p>
	
	<p class="border_4">
		Цвета границ в hsl<br>
		border-left-color: hsl(0,0%,0%);<br>
		border-right-color: hsl(0,100%,50%);<br>
		border-top-color: hsl(120,100%,50%);<br>
		border-bottom-color: hsl(240,100%,50%);
	</p>
	
	<p class="border_5">
		Цвета границ в hsla<br>
		border-left-color: hsla(0,0%,0%,0.5);<br>
		border-right-color: hsla(0,100%,50%,0.5);<br>
		border-top-color: hsla(120,100%,50%,0.5);<br>
		border-bottom-color: hsla(240,100%,50%,0.5);		
	</p>
	
</body>
</html>

Пример №1