CSS Outline

This element has a black border and a blue outline, 10px wide.

CSS Outline

The outline is a line drawn around the element, outside the border, to highlight the element.

CSS has the following outline properties:

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

Note:Outline andBorderDifferent! The difference is that the outline is drawn outside the element border and may overlap with other content. Similarly, the outline is not part of the element size; the total width and height of the element are not affected by the outline line width.

CSS Outline Styles

The outline-style property specifies the outline style and can be set to the following values:

  • dotted - Define a dotted outline.
  • dashed - Define a dashed-line outline.
  • solid - Define a solid-line outline.
  • double - Define a double-line outline.
  • groove - Define a 3D channel outline.
  • ridge - Define a 3D embossed outline.
  • inset - Define a 3D sunken outline.
  • outset - Define a 3D raised outline.
  • none - Define no outline.
  • hidden - Define a hidden outline.

The following example shows different outline-style values:

Example

Demonstrate different outline styles:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Result:

Dashed-Dot Outline.

Dotted Outline.

Solid Outline.

Dashed Outline.

3D Ridge Outline. This effect depends on the outline-color value.

3D Groove Outline. This effect depends on the outline-color value.

3D Emboss Outline. This effect depends on the outline-color value.

3D Bevel Outline. This effect depends on the outline-color value.

Try It Yourself

Note:unless set outline-style Properties, otherwise other outline properties (which will be detailed in the next chapter) will not have any effect!