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

css-свойство outline-style (от англ. outline style – стиль контура) используется для установки стиля контура элемента.

Следует помнить, что в отличие от границ элемента, контур не влияет на размеры и положение самого элемента, а также окружающих элементов, отображаясь поверх них.

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

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

Синтаксис

Значения

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

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-ui-3/#outline-style

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

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		p{
		width: 300px;
		height: 50px;
		margin: 4em;
		padding: 0.5em;
		border: 5px solid violet;
		outline: 8px orange;
		outline-offset: 0.5em;
		}
		
		.p_1{outline-style: none;}
		
		.p_2{outline-style: dotted;}
		
		.p_3{outline-style: dashed;}		
		
		.p_4{outline-style: solid;}
		
		.p_5{outline-style: double;}
		
		.p_6{outline-style: groove;}
		
		.p_7{outline-style: ridge;}
		
		.p_8{outline-style: inset;}

		.p_9{outline-style: outset;}
	</style>
	
</head>
<body>
	<p class="p_1">outline-style: none;</p> 
 
	<p class="p_2">outline-style: dotted;</p>
 
	<p class="p_3">outline-style: dashed;</p>
	
	<p class="p_4">outline-style: solid;</p>	
	
	<p class="p_5">outline-style: double;</p>	
	
	<p class="p_6">outline-style: groove;</p>	
	
	<p class="p_7">outline-style: ridge;</p>
	
	<p class="p_8">outline-style: inset;</p>
	
	<p class="p_9">outline-style: outset;</p>
</body>
</html>

Пример №1