Outline

Outlines are similar to borders, but:

• they never take up space, and

• they are rendered outside borders.

Outline Properties

outline

Shorthand for outline-width, outline-style, outline-color.

You can specify each one optionally. The order does not matter.

<div id="outline-example">
  Content here
</div>

#outline-example {
  height: 50px;
  border: 8px solid cyan;
  outline: 8px dashed blue;
}

outline-width

Sets the width of the outline. (It does not take additional space.)

outline-style

Sets the style of the outline.

outline-color

Sets the color of the outline.

References

• outline (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/outline