outline-style CSS property
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.
It is often more convenient to use the shorthand property outline when defining the appearance of an outline.
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;
}
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;
Values
This property is specified as one of the following values:
auto-
Permits the user agent to render a custom outline style.
none-
No outline is used.
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-widthis 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>
<outline-line-style> =
none |
auto |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
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 |