The outline
CSS 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.
/* width | style | color */ outline: 1px solid white; /* Global values */ outline: inherit; outline: initial; outline: unset;
Outlines differ from borders in the following ways:
- Outlines never take up space, as they are drawn outside of an element's content.
- Outlines may be non-rectangular. They are rectangular in Gecko/Firefox, but Opera, for example, 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:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
Syntax
The outline
property is specified as one, two, or three values from the list below. The order of the values does not matter.
Values
outline-width
- Sets the thickness of the outline.
outline-style
- Sets the style of the outline.
outline-color
- Sets the color of the outline. Since Gecko 1.9 (Firefox 3), the value of the element's
color
property (foreground color) is used as the default.
Formal syntax
[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
Examples
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; }
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. |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | Yes | 1.51 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 | 1 | ? | Yes | 4 | 8 | 7 | 3.1 |
1. Firefox includes absolutely positioned elements inside the outline (see bug 687311).