outline-width (CSS property)

Spec
Inherited Initial Version
No medium CSS2, 2.1
Browser support (more…)
IE8+ FF1.5+ SA1.3+ OP9.2+ CH2+
Buggy Buggy Full Full Full

Syntax

outline-width: { thin | medium | thick | length | inherit } ;

Description

The outline-width property sets the width of the outline that’s drawn around an element. See outline for more information about outlines.

Note that even though an outline-width has been set, outline-style must have a value other than none before the outline will show.

Example

This style rule assigns an outline with a 2px width on focus to anchor elements within the element with ID "example":

#example a:focus {
  outline-width: 2px;
  outline-style: solid;
}

Value

The property takes the same values as border-width—for example, a CSS length (px, pt, em, and so on) or one of the allowed keywords—but percentage or negative values are not allowed.

The keyword width values of thin, medium, and thick aren’t explicitly defined—their display will depend on the user agent—but have the following meaning: thin <= medium <= thick.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None Buggy None Buggy Buggy Buggy Buggy Full Full Full Full Full Full Full Full

Internet Explorer for Windows (up to and including version 7) and Firefox 1.0 provide no support for outline.

Internet Explorer for Windows version 8 mis-positions the outline on inline elements when the parent element has the property/value text-align justify. The outline remains at the exact position had the value justify not been used and will therefore be misaligned with the element it refers to depending on how far the text has been moved when justified.

Firefox up to and including version 3.5 will draw the outline outline around the content of an element that has overflowed its boundaries rather than around the element’s actual set dimensions.

User-contributed notes

Related Products