/* 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: revert; outline-style: unset; 

outline-style

The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border.

It is often more convenient to use the shorthand property outline when defining the appearance of an outline.

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: revert; outline-style: unset; 

The outline-style property is specified as any one of the values listed below.

Values

Permits the user agent to render a custom outline style.

No outline is used. The 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 page.

The opposite of groove: the outline looks as though it were extruded from the page.

The outline makes the box look as though it were embedded in the page.

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

Formal definition

Formal syntax

auto | <'border-style'>

Examples

Setting outline style to auto

The auto value indicates a custom outline style, described in the specification as "typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow".

<div>   <p class="auto">Outline Demo</p> </div> 

.auto {   outline-style: auto; /* same result as "outline: auto" */ }  /* To make the Demo clearer */ * { outline-width: 10px; padding: 15px; } 

Setting outline style to dashed and dotted

<div>   <div class="dotted">     <p class="dashed">Outline Demo</p>   </div> </div> 

.dotted {   outline-style: dotted; /* same result as "outline: dotted" */ } .dashed {   outline-style: dashed; }  /* To make the Demo clearer */ * { outline-width: 10px; padding: 15px; } 

Setting outline style to solid and double

<div>   <div class="solid">     <p class="double">Outline Demo</p>   </div> </div> 

.solid {   outline-style: solid; } .double {   outline-style: double; }  /* To make the Demo clearer */ * { outline-width: 10px; padding: 15px; } 

Setting outline style to groove and ridge

<div>   <div class="groove">     <p class="ridge">Outline Demo</p>   </div> </div> 

.groove {   outline-style: groove; } .ridge {   outline-style: ridge; }  /* To make the Demo clearer */ * { outline-width: 10px; padding: 15px; } 

Setting outline style to inset and outset

<div>   <div class="inset">     <p class="outset">Outline Demo</p>   </div> </div> 

.inset {   outline-style: inset; } .outset {   outline-style: outset; }  /* To make the Demo clearer */ * { outline-width: 10px; padding: 15px; } 

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors