CSS Outline

CSS Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".

CSS has the following outline properties:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

Example 1: Outline Style

The outline-style property specifies the style of the outline.

Example 2: Outline Width

The outline-width property specifies the width of the outline.

Example 3: Outline Color

The outline-color property is used to set the color of the outline.

Example 4: Outline Offset

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

Example 5: Outline Shorthand

The outline property is a shorthand property for setting the following individual outline properties:

• outline-width
• outline-style (required)
• outline-color

p {
  border: 1px solid black;
  outline: 5px dotted red;
  outline-offset: 15px;
}