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;

CSS

Copy Code

/* two identical declarations */

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }

Syntax

CSS

Copy Code

/* 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. See outline-color.

Formal syntax

CSS

Copy Code

<a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/outline-color" title="&lt;color&gt; | invert"><'outline-color'></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/outline-style" title="auto | &lt;br-style&gt;"><'outline-style'></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/outline-width" title="&lt;br-width&gt;"><'outline-width'></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a>

Description

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: `outline-color`: `invert`, for browsers supporting it, `currentColor` for the other `outline-style`: `none` `outline-width`: `medium`
Applies to	all elements
Inherited	no
Media	visual, interactive
Computed value	as each of the properties of the shorthand: `outline-color`: For the keyword `invert`, the computed value is `invert`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The transparent keyword maps to `rgb(0,0,0)`. `outline-width`: an absolute length; if the keyword `none` is specified, the computed value is `0` `outline-style`: as specified
Animatable	as each of the properties of the shorthand: `outline-color`: yes, as a color `outline-width`: yes, as a length `outline-style`: no
Canonical order	order of appearance in the formal grammar of the values

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

CSS CSS Outline CSS Property Layout Reference