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

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

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

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

Синтаксис

outline: outline-color || outline-style || outline-width

Значения

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

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

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

	<style>

		p{
		width: 300px;
		height: 150px;
		margin: 5em;
		padding: 1em;
		}
		
		.p_1{
		border: solid 5px #FF0000;
		outline: dashed 5px green;
		outline-offset: 10px;
		}
		
		.p_2{
		border: 5px solid violet;
		outline: groove 8px orange;
		outline-offset: 5px;
		}
		
		.p_3{
		border: 5px solid green;
		outline: inset 8px;
		outline-offset: 1em;
		}		
		
	</style>
	
</head>
<body>
	 
	<p class="p_1">
		outline: dashed 5px green;<br>
		outline-offset: 10px;
	</p> 
 
	<p class="p_2">
		outline: groove 8px orange;<br>
		outline-offset: 5px;
	</p>
 
	<p class="p_3">
		outline: inset 8px;<br>
		outline-offset: 1em;
	</p>
	
</body>
</html>

Пример №1