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 |
