CSS Outline Property

The CSS outline property is line drawed outside the element’s border

Hi, I have a 2px red border and a blue outline of 6px width

Be careful: 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.

Values

<'outline-color'> Sets the color of the outline. Defaults to currentcolor if absent.
<'outline-style'> Sets the style of the outline. Defaults to none if absent.
<'outline-width'> Sets the thickness of the outline. Defaults to medium if absent.

CSS Outline Style

The outline-style property specifies the style of the outline, and can have one of the following values:

  • dotted – Defines a dotted outline
  • dashed – Defines a dashed outline
  • solid – Defines a solid outline
  • double – Defines a double outline
  • groove – Defines a 3D grooved outline
  • ridge – Defines a 3D ridged outline
  • inset – Defines a 3D inset outline
  • outset – Defines a 3D outset outline
  • none – Defines no outline
  • hidden – Defines a hidden outline

Check it out how it looks each style:

See the Pen
Outline styles
by Carles Rider (@carlesrider)
on CodePen.light

 

And try to play with our generator:

Outline generator

Leave a Reply

Your email address will not be published. Required fields are marked *