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
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 syntax
auto | <br-style>where
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Examples
Example 1 - dotted
and dashed
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; }
Example 2 - 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; }
Example 3 - 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; }
Example 4 - 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; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Basic User Interface Module Level 3 The definition of 'outline-style' in that specification. |
Proposed Recommendation | Added auto value. |
CSS Level 2 (Revision 1) The definition of 'outline-style' in that specification. |
Recommendation | Initial definition. |
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Media | as each of the properties of the shorthand:
|
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | 12 | 1.5 1 — 3.6 -moz- | 8 | 7 | 1.2 |
auto | ? | No | ? | ? | ? | ? |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Basic support | 2.1 | ? | Yes | 46 | 12 | 3.2 | ? |
auto | ? | ? | No | ? | ? | ? | ? |