CSS :: Свойство outline-style
http://belarusweb.net
Основы создания сайтов

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

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

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

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

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

Синтаксис

outline-style: [none | dotted | dashed | solid | double | groove | ridge | inset | outset]

Значения

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

Ссылки

Примеры

HTML Результат BwCodes
<!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