Web/CSS/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.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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: unset;

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

Values

auto

Permits the user agent to render a custom outline style.

none

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

ridge

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

inset

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

outset

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

Formal definition

Initial value	`none`
Applies to	all elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

auto | <'border-style'>

Examples

Setting outline style to auto

The auto value indicates a custom outline style — “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.”

HTML

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

CSS

.auto {
  outline-style: auto; /* same result as "outline: auto" */
}

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

Result

Setting outline style to dashed and dotted

HTML

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

CSS

.dotted {
  outline-style: dotted; /* same result as "outline: dotted" */
}
.dashed {
  outline-style: dashed;
}

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

Result

Setting outline style to solid and double

HTML

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

CSS

.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

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

Result

Setting outline style to groove and ridge

HTML

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

CSS

.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

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

Result

Setting outline style to inset and outset

HTML

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

CSS

.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

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

Result

Specifications

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`outline-style`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1.5 Full support 1.5 No support 1 — 3.6 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	IE Full support 8	Opera Full support 7	Safari Full support 1.2	WebView Android Full support 2	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
`auto`	Chrome Full support 1	Edge Full support 79	Firefox Full support 1.5	IE No support No	Opera Full support 15	Safari Full support 1.2	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
No support: No support
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.

outline-style by Mozilla Contributors is licensed under CC-BY-SA 2.5.