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

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

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

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

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

Синтаксис

outline-width: [<ширина> | thin | medium | thick]

Значения

ширина – принимаются любые единицы измерения (смотреть), используемые в CSS. Проценты использовать не разрешается.
thin – устанавливает для элемента тонкий контур.
medium – устанавливает для элемента средний контур.
thick – устанавливает для элемента толстый контур.

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

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

	<style>
		p{
		width: 300px;
		height: 50px;
		margin: 4em;
		padding: 1em;
		border: 5px solid violet;
		outline: groove orange;
		outline-offset: 0.5em;
		}
		
		.p_1{outline-width: thin;}
		
		.p_2{outline-width: medium;}
		
		.p_3{outline-width: thick;}

		.p_4{outline-width: 1em;}		
	</style>
	
</head>
<body>
	<p class="p_1">outline-width: thin;</p> 
 
	<p class="p_2">outline-width: medium;</p>
 
	<p class="p_3">outline-width: thick;</p>
	
	<p class="p_4">outline-width: 1em;</p>	
</body>
</html>

Пример №1