CSS outline-width Property


The outline is the line that is created around the specified element outside the border of the element to make the particular distinct and easier to distinguish.

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

The outline-width specifies the width of an outline.

Note: Always declare the outline-style property before the outline-width property. An element must have an outline before you change the width of it.

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 of an element is displayed around the margin of the element and is not the same as the border property. As 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.

CSS Syntax

outline-width: medium|thin|thick|length|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 -