outline-style

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

Краткая информация

Значение по умолчанию none
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис

outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

Вид указанных стилей представлен на рис. 1.

Вид границы с разным значением стилей

Рис. 1. Вид границы с разным значением стилей

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки. 
div {
  padding: 10px; 
  outline: 5px #e4efc7;
  outline-style: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>outline-style</title> <style> .noborder a { outline-style: none; /* Убираем границу вокруг ссылок */ } </style> </head> <body> <p><a href="http://ya.ru">Яндекс</a> <a href="http://google.ru">Google</a></p> <p class="noborder"><a href="http://ya.ru">Яндекс</a> <a href="http://google.ru">Google</a></p> </body> </html>

В данном примере для браузера убирается пунктирная граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка ещё будет отображаться, а во втором абзаце она скрывается с помощью значения none свойства outline-style.

Объектная модель

Объект.style.outlineStyle

Спецификация

СпецификацияСтатус
CSS Basic User Interface Module Level 4Рабочий проект
CSS Basic User Interface Module Level 3Рекомендация
CSS Level 2 (Revision 1)Рекомендация

Браузеры

812171.21.5
11.571.2

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Границы