CSS Outline

CSS has the following outline properties:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline (shorthand property)

Note: The outline property differs from the border property as the outline is drawn outside the element's border and does not take up space (it is drawn on top of other content).

p {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

Outline Shorthand

The outline property is a shorthand for setting the outline width, style, and color.

p {
  outline: 5px dotted blue;
}

Outline Offset

The outline-offset property adds space between an outline and the edge/border of an element.

p {
  margin: 30px;
  border: 1px solid black;
  outline: 2px solid red;
  outline-offset: 15px; /* Creates a 15px gap between the border and the outline */
}