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 (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.5 (1.8)[1] | 8.0 | 7.0 | 1.2 (125) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 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).
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
rwilson.or,
erikadoyle,
Sebastianz,
fscholz,
taryn_s,
wbamberg,
tregagnon,
teoli,
bika,
HTMLValidator,
kscarfone,
ninad_ingole,
Sheppy,
ethertank,
Pbb,
FredB,
McGurk,
syssgx,
grendel,
asuth,
gregtyler,
Jürgen Jeka,
j.j.,
BijuGC,
EmmettPickerel,
Waldo
Last updated by:
mfluehr,