outline-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Try it

outline-style: none;

outline-style: dotted;

outline-style: solid;

outline-style: groove;

outline-style: inset;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

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: revert-layer;
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	by computed value type

Formal syntax

outline-style = 
  auto                  |
  <outline-line-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".

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
CSS Basic User Interface Module Level 4 # outline-style

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`outline-style`	1	12	1.5 Before Firefox 88, an outline does not follow the shape of `border-radius`. 1–3.6	7	1.2	18	4 Before Firefox for Android 88, an outline does not follow the shape of `border-radius`.	10.1	1	1.0	2
`auto`	1	12	1.5	15	1.2	18	4	14	1	1.0	4.4
`dashed`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`dotted`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`double`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`groove`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`inset`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`none`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`outset`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`ridge`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`solid`	1	12	1	15	1.2	18	4	14	1	1.0	4.4

Try it

Syntax

Values

Formal definition

Formal syntax

Examples

Setting outline style to auto

HTML

CSS

Result

Setting outline style to dashed and dotted

HTML

CSS

Result

Setting outline style to solid and double

HTML

CSS

Result

Setting outline style to groove and ridge

HTML

CSS

Result

Setting outline style to inset and outset

HTML

CSS

Result

Specifications

Browser compatibility

See also