Свойство 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,
което е свойство съкращение за контури