Свойство outline-style

Описание

Устанавливает стиль внешней границы элемента.

В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Синтаксис

outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset;
Значение Описание
none Граница не отображается. Это значение перекрывает свойство outline-width, если оно присутствует.
dotted Линия состоящая из набора точек.
dashed Пунктирная линия, состоящая из серии коротких отрезков.
solid Сплошная линия.
double Двойная линия.
groove Создаёт эффект вдавленной рамки.
ridge Создаёт эффект рельефной границы.
inset Псевдотрёхмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются.
outset Псевдотрёхмерная рамка, при которой левая и верхняя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #test {
 width: 200px;
 height: 100px;
 background-color: #97dfc8;
 outline: 3px red;
 outline-style: dashed;
 }
 </style>
 <div id='test'></div>
</body>
</html>

Читайте также