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.
/* 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;
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual, interactive |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
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
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. |
Candidate Recommendation | Added auto value. |
CSS Level 2 (Revision 1) The definition of 'outline-style' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.5 (1.8)[1] | 8.0 | 7.0 | 1.2 (125) |
auto |
? | No support | ? | ? | ? | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 2.1 | (Yes) | 46.0 (46) | 10 | 12 | 3.2 |
auto |
? | No support | ? | ? | ? | ? |
[1] In browsers prior to Gecko 1.8 (Firefox 1.5) this effect can be achieved using Mozilla CSS Extension -moz-outline-style
.
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
chrisdavidmills,
arronei,
erikadoyle,
Druzion,
Sebastianz,
fscholz,
samdroid,
teoli,
Rob W,
kscarfone,
Sheppy,
ethertank,
FredB,
grendel,
Jürgen Jeka,
j.j.,
BijuGC,
Waldo
Last updated by:
mfluehr,