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

Свойство CSS outline-style задаёт стиль линии обводки элемента — например solid, dashed или dotted. Обводка (outline) — это линия, нарисованная сразу за рамкой элемента, вокруг всех четырёх сторон одновременно.

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

Зачем использовать обводку?

Обводка чаще всего используется для отображения фокуса. Когда пользователь переходит по ссылке, кнопке или полю формы с помощью клавиатуры, браузер рисует обводку, чтобы было видно текущий элемент. Удаление обводки без замены нарушает доступность при работе с клавиатурой, поэтому лучше изменить её стиль, а не убирать совсем.

Обводка отличается от border в двух важных аспектах:

Она не занимает пространство. Обводка рисуется за пределами рамки и не влияет на макет страницы, поэтому добавление или изменение обводки никогда не сдвигает соседние элементы. Свойства width и height элемента не включают обводку.
Нельзя управлять отдельными сторонами или углами. В отличие от рамок, нельзя задать разную обводку для одной стороны, а обычная обводка следует форме блока, а не его border-radius.

Чтобы обводка отображалась, outline-style должно быть задано значение, отличное от none — именно это свойство «включает обводку». Комбинируйте его с outline-color и outline-width, или используйте сокращённое свойство outline для установки всех трёх параметров сразу.

Свойство outline-style принимает следующие значения:

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Значения groove, ridge, inset и outset создают трёхмерный эффект за счёт тонирования обводки на основе outline-color. Эффект наиболее заметен при большей толщине и средненасыщенном цвете — на чисто чёрном или белом цвете он практически не виден.

Начальное значение	none
Применяется к	Всем элементам.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS2
DOM Syntax	object.style.outlineStyle = "dotted"

Синтаксис

CSS outline-style syntax

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

Пример свойства outline-style:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .p1 {
        outline-style: solid;
      }
      .p2 {
        outline-style: dashed;
      }
      .p3 {
        outline-style: dotted;
      }
      .p4 {
        outline-style: double;
      }
      .p5 {
        outline-style: none;/*hidden*/
      }
      .p6 {
        outline-style: groove;
        outline-color: #ccc;
      }
      .p7 {
        outline-style: ridge;
        outline-color: #ccc;
      }
      .p8 {
        outline-style: inset;
        outline-color: #ccc;
      }
      .p9 {
        outline-style: outset;
        outline-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <p class="p1">This is a paragraph with outline set to solid.</p>
    <p class="p2">This is a paragraph with outline set to dashed.</p>
    <p class="p3">This is a paragraph with outline set to dotted.</p>
    <p class="p4">This is a paragraph with outline set to double.</p>
    <p class="p5">This is a paragraph with outline set to none.</p>
    <p class="p6">This is a paragraph with outline set to groove.</p>
    <p class="p7">This is a paragraph with outline set to ridge.</p>
    <p class="p8">This is a paragraph with outline set to inset.</p>
    <p class="p9">This is a paragraph with outline set to outset.</p>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства outline-style со всеми значениями:

CSS outline-style another code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.dotted {
        outline: 4px dotted gray;
      }
      p.dashed {
        outline: 0.2em dashed rgb(142, 191, 66);
      }
      p.solid {
        outline: 4px solid #ccc;
      }
      p.double {
        outline: 4px double #000;
      }
      p.groove {
        outline: 4px groove #666;
      }
      p.ridge {
        outline: thick ridge #1c87c9;
      }
      p.inset {
        outline: medium inset #1c87c9;
      }
      p.outset {
        outline: 4px outset #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <p class="dotted">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="solid">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="double">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="groove">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="ridge">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="inset">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="outset">Lorem Ipsum is simply dummy text of the printing...</p>
  </body>
</html>

Попробуйте сами »

В этом втором примере используется сокращённое свойство outline для одновременной установки стиля, толщины и цвета — например outline: 4px dotted gray.

Пример свойства outline-style со значением «groove»:

Example of the outline-style property with the groove value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #7f7fa7;
        text-align: center;
        outline-width: 8px;
        outline-style: groove;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to groove.</p>
  </body>
</html>

Попробуйте сами »

Пример свойства outline-style со значением «ridge»:

Example of the outline-style property with the ridge value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #69afad;
        text-align: center;
        outline-width: 8px;
        outline-style: ridge;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to ridge.</p>
  </body>
</html>

Попробуйте сами »

Пример свойства outline-style со значением «inset»:

Example of the outline-style property with the inset value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #69afad;
        text-align: center;
        outline-width: 8px;
        outline-style: inset;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to inset.</p>
  </body>
</html>

Попробуйте сами »

Пример свойства outline-style со значением «outset»:

Example of the outline-style property with the outset value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #69afad;
        text-align: center;
        outline-width: 8px;
        outline-style: outset;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to outset.</p>
  </body>
</html>

Попробуйте сами »

Пример свойства outline-style со значением «dotted»:

Example of the outline-style property with the dotted value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #69afad;
        text-align: center;
        outline-width: 4px;
        outline-style: dotted;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to dotted.</p>
  </body>
</html>

Попробуйте сами »

Пример свойства outline-style со значением «dashed»:

Example of the outline-style property with the dashed value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #69afad;
        text-align: center;
        outline-width: 4px;
        outline-style: dashed;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to dashed.</p>
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание	Пример
none	Обводка не отображается. Это значение по умолчанию.	Play it »
hidden	То же, что `none` для обводок (значение существует для совместимости с `border-style`).	Play it »
dotted	Обводка задаётся в виде ряда точек.	Play it »
dashed	Обводка задаётся в виде ряда штрихов.	Play it »
solid	Обводка задаётся в виде сплошной линии.	Play it »
double	Обводка задаётся в виде двойной сплошной линии.	Play it »
groove	Задаёт трёхмерную бороздчатую обводку.	Play it »
ridge	Задаёт трёхмерную гребневидную обводку.	Play it »
inset	Задаёт утопленную обводку.	Play it »
outset	Задаёт выпуклую обводку.	Play it »
initial	Устанавливает свойство в значение по умолчанию.	Play it »
inherit	Наследует значение свойства от родительского элемента.

Советы и распространённые ошибки

outline-style сам по себе может быть невидимым. Если не задать ширину или цвет, ширина обводки по умолчанию равна medium, а цвет — currentColor, поэтому обычно она всё же отображается — но если задать outline-width: 0, она не появится. Используйте сокращённое свойство outline для явного указания всех параметров.
Не удаляйте обводку фокуса просто так. outline: none убирает кольцо фокуса при навигации с клавиатуры. Если дизайн требует его убрать, замените его собственной обводкой или стилем фокуса через box-shadow, чтобы пользователи клавиатуры по-прежнему видели фокус.
Используйте outline-offset для отступа. Поскольку по умолчанию обводка вплотную прилегает к рамке, свойство outline-offset отодвигает её наружу (или внутрь при отрицательном значении), не влияя на макет.
Обводка vs. рамка. Используйте outline, когда нужен индикатор, не изменяющий размер или положение блока; используйте border, когда линия является частью макета элемента.

Связанные свойства

outline — сокращение для outline-width, outline-style и outline-color.
outline-color — задаёт цвет обводки.
outline-width — задаёт толщину обводки.
border — аналог обводки, но с влиянием на макет.

Зачем использовать обводку?

Синтаксис

Пример свойства outline-style:

Результат

Пример свойства outline-style со всеми значениями:

Пример свойства outline-style со значением «groove»:

Пример свойства outline-style со значением «ridge»:

Пример свойства outline-style со значением «inset»:

Пример свойства outline-style со значением «outset»:

Пример свойства outline-style со значением «dotted»:

Пример свойства outline-style со значением «dashed»:

Значения

Советы и распространённые ошибки

Связанные свойства

Практика