outline

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

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

Browser compatibility

[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).