CSS свойство outline

CSS свойства

Определение и применение

CSS свойство outline устанавливает все свойства контура элемента в одном объявлении (контур не является частью элемента и не влияет на его ширину - свойства элемента width и height не содержат ширину контура).

Свойства, которые могут быть заданы:

Если одно из значений свойства отсутствует, то значение этого свойства будет установлено по умолчанию автоматически. Особенно это заметно, когда вы не укажете значение outline-style, т.к. значению по умолчанию этого свойства "none", т.е. отсутствие контура.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
outline1.01.57.01.28.0*12.0

CSS синтаксис:

outline:"outline-style outline-width outline-color | initial | inherit";

JavaScript синтаксис:

object.style.outline = "solid medium orange"

Значения свойства

ЗначениеОписание
outline-styleУстанавливает стиль контура элемента. Значение по умолчанию none.
outline-widthЗадает ширину контура элемента. Значение по умолчанию medium.
outline-colorУстанавливает цвет контура элемента. Значение по умолчанию invert.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример работы с контуром в CSS</title>
<style> 
div {
width : 10em; /* устанавливаем ширину блока */
height : 10em; /* устанавливаем высоту блока */
background-color : Plum; /* устанавливает цвет заднего фона */
border : 2px solid white; /* устанавливает сплошную границу размером 2px белого цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */
}
.test   {outline : solid medium orange;}  /* устанавливаем контур средней ширины, тип контура - сплошной, оранжевого цвета */
.test2 {outline : dotted thin;}  /* устанавливаем контур тонкой ширины, тип контура - точечный */
.test3 {outline : dashed thick #777;}  /* устанавливаем контур жирной ширины, тип контура - пунктир, цвет #777777 (#777) */
</style>
</head>
	<body>
		<div class = "test">solid medium orange</div>
		<div class = "test2">dotted thin</div>
		<div class = "test3">dashed thick #777</div>
	</body>
</html>
Пример работы с контуром в CSS (универсальное свойство outline).
Пример работы с контуром в CSS (универсальное свойство outline).
CSS свойства