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

CSS свойства

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

CSS свойство outline-style устанавливает стиль контура элемента (за пределами границы). Контур не является частью элемента (свойства элемента width и height не содержат ширину контура).

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

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

CSS cинтаксис:

outline-style:"none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit";

JavaScript cинтаксис:

object.style.outlineStyle = "double"

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

ЗначениеОписание
none
Указывает, что контур элемента отсутствует. Это значение по умолчанию.
hidden
Указывает, что контур элемента скрыт.
dotted
Указывает точечный контур.
dashed
Указывает пунктирный контур.
solid
Указывает сплошной контур.
double
Указывает двойной контур.
groove
Отображает контур с 3d эффектом (противоположно значению ridge). Эффект зависит от значения свойства outline-color.
ridge
Отображает контур с 3d эффектом (противоположно значению groove). Эффект зависит от значения свойства outline-color.
inset
Отображает контур с 3d эффектом (противоположно значению outset). Эффект зависит от значения свойства outline-color.
outset
Отображает контур с 3d эффектом (противоположно значению inset). Эффект зависит от значения свойства outline-color.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
<title>Пример работы с контуром в CSS</title>
<style> 
div {
outline-width : 3px; /* устанавливаем ширину контура */
outline-color : red; /* устанавливаем цвет контура */
width : 4em; /* устанавливаем ширину блока */
height : 4em; /* устанавливаем высоту блока */
background-color : Plum; /* устанавливает цвет заднего фона */
border : 2px solid white; /* устанавливает сплошную границу размером 2px белого цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 10px; /* устанавливаем величину отступа от правого края элемента */
}
.test {outline-style : dotted;} /* устанавливаем стиль контура точечный */
.test2 {outline-style : dashed;} /* устанавливаем стиль контура пунктирный */
.test3 {outline-style : solid;} /* устанавливаем стиль контура сплошной */
.test4 {outline-style : double;} /* устанавливаем стиль контура двойной */
.test5 {outline-style : groove;} /* устанавливаем стиль контура с 3d эффектом */
.test6 {outline-style : ridge;} /* устанавливаем стиль контура с 3d эффектом */
.test7 {outline-style : inset;} /* устанавливаем стиль контура с 3d эффектом */
.test8 {outline-style : outset;} /* устанавливаем стиль контура с 3d эффектом */
</style>
</head>
	<body>
		<div class = "test">dotted</div>
		<div class = "test2">dashed</div>
		<div class = "test3">solid</div>
		<div class = "test4">double</div>
		<div class = "test5">groove</div>
		<div class = "test6">ridge</div>
		<div class = "test7">inset</div>
		<div class = "test8">outset</div>
	</body>
</html>
Пример работы с контуром в CSS (свойства outline-width, outline-style и outline-color).
Пример работы с контуром в CSS (свойства outline-width, outline-style и outline-color).
CSS свойства