The outline-width
CSS property sets the width (thickness) of an element's outline. An outline is a line that is drawn around an element, outside the border
.
It is often more convenient to use the shorthand property outline
when defining the appearance of an outline.
/* 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;
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 |
Animation type | a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
The outline-width
property is specified as any one of the values listed below.
Values
thin
- Depends on the user agent. Typically 1px in desktop browsers like Firefox.
medium
- Depends on the user agent. Typically 3px in desktop browsers like Firefox.
thick
- Depends on the user agent. Typically 5px in desktop browsers like Firefox.
<length>
- The width of the outline specified as a
<length>
.
Formal syntax
<br-width>
Examples
HTML
<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="em">1.2em</span>
CSS
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; } #em { outline-width: 1.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. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | Yes | 1.5 1 —? -moz- | 8 | 7 | 1.2 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | Yes | ? | ? | ? | ? |
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
mfluehr,
chrisdavidmills,
erikadoyle,
Prinz_Rana,
Sebastianz,
Cust0dian,
kscarfone,
teoli,
Sheppy,
ethertank,
FredB,
grendel,
Jürgen Jeka,
j.j.,
Ms2ger,
BijuGC,
Waldo
Last updated by:
fscholz,