Свойство 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,
которое является свойством сокращением для рамок