CSS outline-style Property


The outline-style CSS property sets the style of the outline of an element. However, in many cases the shorthand propertiey outline is more convenient to use and preferable.

The outline-style property in CSS is used to set the appearance of the outline of an element. The outline and border of an element are similar, but not the same. The outline does not take space and it is drawn outside the border of an element. Also, the outline is drawn around all the four sides of the element by default, and there is no way to alter this.

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

Tips and Notes

An outline is a line around an element. It is displayed around the margin of the element. However, it is different from the border property.

The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.

The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Supported Browsers: The browser supported by property are listed below:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example -