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 задаёт расстояние между обводкой и краем или рамкой элемента.

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

outline-offset: 4px;

outline-offset: 0.6rem;

outline-offset: 12px;
outline: 5px dashed blue;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  border: 2px solid crimson;
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Синтаксис

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