CSS - outline-width
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:
Examples
HTML Content
HTML
Copy Code
<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
CSS
Copy Code
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; }
Syntax
CSS
Copy Code
/* 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
CSS
Copy Code
<a href="css/outline-width#br-width"><br-width></a><p>where <br><code><br-width> = <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> thin <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> medium <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> thick</code></p>
Description
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 |
Browser Compatibility
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
.
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 |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/outline-width