CSS Outline

CSS outline is just like CSS border property. It facilitates you to draw an extra border around an element to get visual attention.

CSS has the following outline properties:

  • outline
  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • Outline Style

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

    • none: No border. (Equivalent of outline-width:0;)

    • solid: Outline is a single solid line.

    • dotted: Outline is a series of dots.

    • dashed: Outline is a series of short lines.

    • double: Outline is two solid lines.

    • groove: Outline looks as though it is carved into the page.

    • ridge: Outline looks the opposite of groove.

    • inset: Outline makes the box look like it is embedded in the page.

    • outset: Outline makes the box look like it is coming out of the canvas.

    • hidden: Same as none.

    Example -

    The outline-color Property

    The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.

    Example -

    Outline Width

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

  • thin (typically 1px)
  • thick (typically 5px)
  • medium (typically 3px)
  • A specific size (in px, pt, cm, em, etc)
  • Example -

    Outline - Shorthand property

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

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

    The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.

    Example -

    Outline Offset

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

    Example -