outline-width

Summary

The outline-width CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:

Initial value	`medium`
Applies to	all elements
Inherited	no
Media	visual, interactive
Computed value	an absolute length; if the keyword `none` is specified, the computed value is `0`
Animatable	yes, as a length
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* <length> values */
outline-width: 1px;
outline-width: 0.1em;

/* Global values */
outline-width: inherit;

Values

thin: Depends on the UA. Typically 1px in desktop browsers like Firefox.
medium: Depends on the UA. Typically 3px in desktop browsers like Firefox.
thick: Depends on the UA. Typically 5px in desktop browsers like Firefox.
<length>: See <length> values.

Formal syntax

<br-width>where 
<br-width> = <length> | thin | medium | thick

Examples

HTML Content

<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="twoem">2em</span>

CSS Content

span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#twoem {
  outline-width: 2em;
}

Specifications

Specification	Status	Comment
CSS Basic User Interface Module Level 3 The definition of 'outline-width' in that specification.	Candidate Recommendation	No change
CSS Transitions The definition of 'outline-width' in that specification.	Working Draft	Defines `outline-width` as animatable.
CSS Level 2 (Revision 1) The definition of 'outline-width' in that specification.	Recommendation	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.5 (1.8)^[1]	8.0	7.0	1.2 (125)

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?

[1] In browsers previous to Gecko 1.8 (Firefox 1.5) essentially the same effect can be achieved using Mozilla CSS Extension -moz-outline-width.