CSS - outline
The CSS outline
property is a shorthand property for setting one or more of the individual outline properties outline-style
, outline-width
and outline-color
in a single declaration. In most cases the use of this shortcut is preferable and more convenient.
Example
outline: solid; | outline: dashed red; | outline: dotted 1px; | outline: ridge thick violet; | outline: custom 5px;
/* two identical declarations */ :link:hover { outline: 1px solid #000; } :link:hover { outline: solid black 1px; }
Syntax
/* width | style | color */ outline: 1px solid white; /* Global values */ outline: inherit; outline: initial; outline: unset;
Values
One, two or three values, given in arbitrary order:
<'outline-width'>
- See
outline-width
. <'outline-style'>
- See
outline-style
. <'outline-color'>
- Since Gecko 1.9 (Firefox 3), the value of the element's
color
property (foreground color) is used. Seeoutline-color
.
Formal syntax
<a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/outline-color" title="<color> | invert"><'outline-color'></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/outline-style" title="auto | <br-style>"><'outline-style'></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/outline-width" title="<br-width>"><'outline-width'></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a>
Description
The CSS outline
property is a shorthand property for setting one or more of the individual outline properties outline-style
, outline-width
and outline-color
in a single declaration. In most cases the use of this shortcut is preferable and more convenient.
Outlines differ from borders in the following ways:
- Outlines do not take up space, they are drawn above the content.
- Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape around a construct like this:
TEXTTEXTTEXT
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements |
Inherited | no |
Media | visual, interactive |
Computed value | as each of the properties of the shorthand:
|
Animatable | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
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 Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.8) [1] | 8.0 | 6.0 | 3.1 |
[1] In browsers previous to Gecko 1.8 (Firefox 1.5) a similar effect can be achieved using Mozilla CSS Extension -moz-outline
.
Firefox includes absolutely positioned elements inside the outline (bug 687311).
Specifications
Specification | Status | Comment |
---|---|---|
CSS Basic User Interface Module Level 3 The definition of 'outline' in that specification. |
Candidate Recommendation | No change |
CSS Level 2 (Revision 1) The definition of 'outline' 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