Свойство outline-offset

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

Синтаксис

cssселектор {
  outline-offset: значение;
}

Пример . Положительное значение

Рамка отступает от элемента (он выделен фоном):

html<div id="elem"></div>

css#elem {
  outline-offset: 5px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

Пример . Отрицательное значение

Рамка находится внутри элемента:

html<div id="elem"></div>

css#elem {
  outline-offset: -10px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

Пример . Отрицательное значение outline + border

Можно сделать такой интересный эффект (обратите внимание на толщину белого промежутка между границами, он 10px, а не 14, так как часть съел outline своей толщиной в 4px):

html<div id="elem"></div>

css#elem {
  outline-offset: -14px;
  outline: 4px solid green;
  border: 4px solid red;
  width: 300px;
  height: 100px;
}

Результат:

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