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

cssselector {
  outline: width type color;
}

The order of the properties does not matter.

Example . Only outline

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

css#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:

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

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

Результат:

See also