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

См. также свойства outline-width, outline-style, outline-color и свойство-сокращение outline (outline-width не входит в свойство-сокращение!).

Синтаксис

селектор {
	outline-offset: 1px;
}

Значения

Значение Описание
CSS единицы Значение в заданных CSS единицах (кроме процентов).

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

В процентах задание outline-offset невозможно.

Примеры

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

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

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

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

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

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

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

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

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

Результат выполнения кода: