outline-offset CSS

Свойство outline-offset устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.

Значение по умолчанию:

0

Наследуется:
Нет
Применяется:

Ко всем элементам

Анимируется:
Да
Объект JavaScript:

object.style.outlineOffset

Спецификации:
  • [CSS Basic User Interface Module Level 3](CSS Basic User Interface Module Level 3)
Поддержка браузерами:

Can I Use outline? Data on support for the outline feature across the major browsers from caniuse.com.

Синтаксис

/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;

/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;

Значения

  • <размер> — Задаёт расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.

Примеры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>outline-offset</title>
  <style>
   .clue {
    background: url(/example/image/leather.jpg); /* Фоновый рисунок */
    outline: 2px dashed rgba(255,255,255,0.8); /* Пунктирная рамка */
    outline-offset: -10px; /* Выводим рамку внутри элемента */
    padding: 10px; /* Поля */
    min-height: 100px; /* Минимальная высота */
   }
  </style>
 </head>
 <body>
   <div class="clue"></div>
 </body>
</html>