outline-style

Обновлено: 30.12.2022

outline-style

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

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

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

Синтаксис

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

Значения

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

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

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

Пример

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

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

Объект.style.outlineStyle

Браузеры

outline-style

Посмотреть совместимость на Can I use?

outline-style