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
is0
. -
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 3 The 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
BCD tables only load in the browser