outline-offset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

CSS-свойство outline-offset задаёт расстояние между обводкой и краем или рамкой элемента.

Интерактивный пример

Синтаксис

css
/* Значения <length> */
outline-offset: 3px;
outline-offset: 0.2em;

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

Значения

<length>

Размер расстояния между элементом и его обводкой. При отрицательном значении обводка располагается внутри элемента. Значение 0 размещает обводку вплотную к элементу.

Описание

Обводка — это линия вокруг элемента за пределами рамки. Расстояние между элементом и его обводкой прозрачно. Другими словами, оно будет таким же, как и фон родительского элемента.

Формальное определение

Начальное значение0
Применяется квсе элементы
Наследуетсянет
Обработка значениякак указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation typeдлина

Формальный синтаксис

outline-offset = 
<length>

Примеры

Расстояние обводки в пикселях

HTML

html
<p>Gallia est omnis divisa in partes tres.</p>

CSS

css
p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}

Результат

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

Specification
CSS Basic User Interface Module Level 4
# outline-offset

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
outline-offset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Смотрите также