w3docs logo

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

Свойство outline-offset указывает расстояние между рамкой и краем границы элемента.

Свойство outline-offset не является частью сокращенного свойства outline. Оно должно быть указано отдельно.

Значение по умолчанию 0
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да. Ширина пространства анимируема.
Версия CSS3
DOM синтаксис object.style.outlineOffset = "20px";

Синтаксис

outline-offset: length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div.ex1 {
      margin: 20px;
      border: 2px dotted #000;
      background-color: #8ebf42;
      outline: 4px solid #666;
      outline-offset: 10px;
      }  
    </style>
  </head>
  <body>
    <h2>Пример свойства outline-offset</h2>
    <div class="ex1">Значение свойства outline-offset равно 10px</div>
  </body>
</html>

В этом примере расстояние между рамкой и границей равно 10px.

Значения

Значение Описание
length Пространство между рамкой и краем границы элемента. Значение по умолчанию - 0.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
1.0+ 15.0+ 1.5+ 1.2+ 9.5+

Практикуйте свои знания

Что такое CSS свойство 'outline-offset'?
Считаете ли это полезным?