mozilla

outline-style

The outline-style CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

It is often more convenient to use the shortcut property outline instead of outline-style, outline-width and outline-color.

Syntax

/* Keyword values */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/* Global values */
outline-style: inherit;
outline-style: initial;
outline-style: unset;

Values

<br-style> can be any of the following:

none

No outline (outline-width is 0).
dotted

The outline is a series of dots.
dashed

The outline is a series of short line segments.
solid

The outline is a single line.
double

The outline is two single lines. The outline-width is the sum of the two lines and the space between them.
groove

The outline looks as though it were carved into the canvas.
ridge

The opposite of groove: the outline looks as though it were coming out of the canvas.
inset

The outline makes the box look as though it were embeded in the canvas.
outset

The opposite of inset: the outline makes the box look as though it were coming out of the canvas.

Formal syntax

auto | <br-style>

where
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Examples

.example {  /* make the outline a 3D groove style */
   outline-style: groove;        /* same result as "outline: groove" */ 
}

Specifications

Specification Status Comment
CSS Basic User Interface Module Level 3
The definition of 'outline-style' in that specification.
Candidate Recommendation Added auto value
CSS Level 2 (Revision 1)
The definition of 'outline-style' in that specification.
Recommendation Initial definition

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)
auto ? ? ? ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
auto ? ? ? ? ?

[1] In browsers prior to Gecko 1.8 (Firefox 1.5) this effect can be achieved using Mozilla CSS Extension -moz-outline-style.

See also

Document Tags and Contributors

Last updated by: fscholz,