The outline-offset property

The outline-offset property specifies an offset of an outline - a border that does not take up space. The property value is any size units, except percentages. Default value: 0. A positive value moves the frame outward from the element, a negative one moves it inward.

Syntax

selector {
	outline-offset: value;
}

Example . A positive value

The outline moves away from the element (it is highlighted with a background):

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

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

Example . A negative value

The outline is inside the element:

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

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

Example . A negative outline value + border

You can create such an interesting effect (pay attention to the width of the white space between the borders, it is 10px, and not 14, since outline took up part of it by its width of 4px):

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

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

The outline-offset property

Syntax

Example . A positive value

Example . A negative value

Example . A negative outline value + border

See also