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

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

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

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

Синтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4}

Значения

none – граница не отображается, браузер обнуляет ее ширину (значение используется по умолчанию).
hidden – в принципе тоже самое, что и none, за исключением того, что в случае применения данного значения к границам ячеек таблицы, у которой значение свойства border-collapse установлено как collapse, граница вокруг ячейки не будет отображаться вообще, включая и совмещенные границы смежных ячеек.
dotted – линия границы будет иметь точечный вид.
dashed – линия границы будет иметь пунктирный вид.
solid – линия границы будет сплошной.
double – линия границы будет двойной.
groove – линия границы будет иметь объемный рифленый вид с эффектом вдавленности.
ridge – линия границы будет иметь объемный рифленый вид с эффектом выпуклости.
inset – линия границы будет иметь объемный вид с эффектом вдавленности.
outset – линия границы будет иметь объемный вид с эффектом выпуклости.

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

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

Ссылки

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

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

Примеры

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 green;
		}
		
		/* Четыре значения */
		.border_1{
		border-style: none dotted dashed solid;
		}
				
		/* Три значения */
		.border_2{
		border-style: double groove ridge;		
		}
		
		/* Два значения */
		.border_3{
		border-style: inset outset;		
		}
		
		/* Одно значение */
		.border_4{
		border-style: dashed;		
		}		
		
	</style>
	
</head>
<body>
	<p class="border_1">
		Четыре значения<br>
		border-style: none dotted dashed solid;
	</p>
	
	<p class="border_2">
		Три значения<br>
		border-style: double groove ridge;
	</p>
	
	<p class="border_3">
		Два значения<br>
		border-style: inset outset;
	</p>
	
	<p class="border_4">
		Одно значение<br>
		border-style: dashed;
	</p>
		
</body>
</html>

Пример №1