pelicin › web › CSS

Outline

Outlines are similar to borders, but:

  • they never take up space, and

  • they are rendered outside borders.

Illustration of CSS Box model
Illustration of CSS Box model

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;
}
| LIVE PREVIEW
Content here

outline-width

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

outline-style

Sets the style of the outline.

outline-style="..."Preview
none
hidden
solid
dashed
dotted
double
groove
ridge
inset
outset

outline-color

Sets the color of the outline.

References