# Свойство outline-offset

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

## Синтаксис

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

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

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

`<div id="elem"></div>` `#elem { outline-offset: 5px; outline-width: 1px; outline-style: solid; outline-color: black; background-color: #e4f1ed; width: 300px; height: 100px; }`

:

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

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

`<div id="elem"></div>` `#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`):

`<div id="elem"></div>` `#elem { outline-offset: -14px; outline: 4px solid green; border: 4px solid red; width: 300px; height: 100px; }`

:

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

- свойство `outline-width`,
  которое задает толщину рамки
- свойство `outline-style`,
  которое задает стиль рамки
- свойство `outline-color`,
  которое задает цвет рамки
- свойство `outline`,
  которое является свойством сокращением для рамок

←→
↑