The outline property

The outline property specifies a color, type, and width for an outline (a border that doesn't take up space) for all sides at the same time, but unlike border such a border does not extend the element. It is a shorthand property for outline-width, outline-style and outline-color (but not for outline-offset).

Syntax

selector {
	outline: width type color;
}

The order of the properties does not matter.

Example . Only outline

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

#elem {
	outline: 1px solid black;
	width: 300px;
	height: 100px;
}

Example . The outline and border properties together

The border for outline will be outside, and the border for border will be inside:

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

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

The outline property

Syntax

Example . Only outline

Example . The outline and border properties together

See also