We want to help developers like you. Tell us about how you work: http://qsurvey.mozilla.com/s3/Developer-Audience-Survey-V2/?s=mdn


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.

Initial valuenone
Applies toall elements
Mediavisual, interactive
Computed valueas specified
Canonical orderthe unique non-ambiguous order defined by the formal grammar


/* 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;


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


No outline (outline-width is 0).

The outline is a series of dots.

The outline is a series of short line segments.

The outline is a single line.

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

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

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

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

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

Formal syntax

auto | <br-style>

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


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


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.

Document Tags and Contributors

 Last updated by: Sebastianz,