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

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

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

Попробуйте значения outline-style

Outline рисуется поверх окружения и не занимает места в раскладке. Соседний блок остаётся на прежнем месте. Обводка здесь задана явно, без необходимости фокусировать элемент.

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

outline-style: solid

HTML и CSS примера
HTML
<div class="stage">
  <div class="demo-target">Обводка</div>
  <div class="neighbor">Соседний блок</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  border: 2px dashed #607589;
  background: #edf2f5;
  font: 16px/1.4 system-ui;
  color: #172c3d;
}
.stage {
  padding: 20px;
}
.demo-target {
  background: #ffe4bd;
  border: 3px solid #245a85;
  padding: 12px;
  outline: 4px solid #b53625;
  outline-style: solid;
}
.neighbor {
  margin-top: 12px;
  padding: 8px;
  background: #d9edf8;
}

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

Спецификация: CSS ui

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.properties.outline-style
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
outline-style✓1✓12✓1.5✓7✓1.2✓18✓4✓10.1✓1✓1.0✓2✓1
auto✓1✓12✓1.5✓15✓1.2✓18✓4✓14✓1✓1.0✓4.4✓1
dashed✓1✓12✓1✓15✓1.2✓18✓4✓14✓1✓1.0✓4.4✓1
dotted✓1✓12✓1✓15✓1.2✓18✓4✓14✓1✓1.0✓4.4✓1
double✓1✓12✓1✓15✓1.2✓18✓4✓14✓1✓1.0✓4.4✓1
groove✓1✓12✓1✓15✓1.2✓18✓4✓14✓1✓1.0✓4.4✓1
inset✓1✓12✓1✓15✓1.2✓18✓4✓14✓1✓1.0✓4.4✓1
none✓1✓12✓1✓15✓1.2✓18✓4✓14✓1✓1.0✓4.4✓1
outset✓1✓12✓1✓15✓1.2✓18✓4✓14✓1✓1.0✓4.4✓1
ridge✓1✓12✓1✓15✓1.2✓18✓4✓14✓1✓1.0✓4.4✓1
solid✓1✓12✓1✓15✓1.2✓18✓4✓14✓1✓1.0✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
outline-style: auto | <outline-line-style>;

/* Глобальные значения */
outline-style: initial | inherit | unset | revert | revert-layer;

| — выбор варианта.

JavaScript синтаксис:

JavaScript
element.style.outlineStyle = "double";

Начальное значение свойства

none.

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

Значения outline-style
Значение Описание
none
Указывает, что контур элемента отсутствует. Начальное значение.
hidden
Для контура значение hidden недопустимо. Чтобы убрать контур, используйте none, сохраняя видимый индикатор клавиатурного фокуса.
dotted
Указывает точечный контур.
dashed
Указывает пунктирный контур.
solid
Указывает сплошной контур.
double
Указывает двойной контур.
groove
Отображает контур с 3d эффектом (противоположно значению ridge). Эффект зависит от значения свойства outline-color.
ridge
Отображает контур с 3d эффектом (противоположно значению groove). Эффект зависит от значения свойства outline-color.
inset
Отображает контур с 3d эффектом (противоположно значению outset). Эффект зависит от значения свойства outline-color.
outset
Отображает контур с 3d эффектом (противоположно значению inset). Эффект зависит от значения свойства outline-color.
auto Стиль контура выбирается браузером, например с учётом системного оформления фокуса.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства outline-style устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Basic User Interface — спецификация outline-style.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

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

Контур блока

Замените dashed на double, dotted или none.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.sample {
    margin: 20px;
    border: 1px solid #8495a5;
    padding: 12px;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Контур блока</title>
  </head>
  <body>
    <section>
      <h3>Вариант A</h3>
      <div class="sample first">Результат</div>
    </section>
    <section>
      <h3>Вариант B</h3>
      <div class="sample second">Результат</div>
    </section>
  </body>
</html>
style.css
CSS
.sample {
    outline-width: 3px;
    outline-color: #245a85;
}
.first {
    outline-style: solid;
}
.second {
    outline-style: dashed;
}