The outline-style
property specifies the style of the outline.
An outline is a focus indicator that looks like a border.
Outlines do not take up space and can overlap adjacent elements.
An element with outline-style
value of dashed
.
<style>
.outline {
outline-color: steelblue;
outline-width: 2px;
outline-style: dashed;
padding: 25px;
}
</style>
<div class="outline">
An element with a dashed outline
</div>
The outline-style
default is none
, that is, no outline.
There is no default. If not specified, no outline is drawn.
Also, if outline
is 0
or none
, it's not visible.
Outlines are designed to draw attention to the element.
outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
Value | Description |
---|---|
none | Default. No outline |
hidden | Same as none except for table, it conflicts on the resolution |
dotted | Dotted outline |
dashed | Dashed outline |
solid | Solid outline |
double | Double outline |
groove | 3D groove outline |
ridge | 3D ridge outline |
inset | 3D inset outline |
outset | 3D outset outline |
initial | Sets the value to its default value. |
inherit | Inherits the value from its parent element. |
Click the buttons to see the different outline-style
values.
<style>
.outline-example {
outline-color: steelblue;
outline-width: 2px;
outline-style: dotted;
padding: 25px;
}
</style>
<div class="outline-example">
An element with a dotted outline
</div>
This table shows when outline-style
support started for each browser.
![]() Chrome
|
1.0 | Dec 2008 |
![]() Firefox
|
1.5 | Nov 2005 |
![]() IE/Edge
|
8.0 | Mar 2009 |
![]() Opera
|
7.0 | Jan 2003 |
![]() Safari
|
1.2 | Feb 2004 |