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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
outline-style | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
1.5
| 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.