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-widthis0. 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>
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
Loading…