CSS outline-style Property

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.

Example

#

An element with outline-style value of dashed.

An element with a dashed outline
<style>
  .outline {
    outline-color: steelblue;
    outline-width: 2px;
    outline-style: dashed;
    padding: 25px;
  }
</style>

<div class="outline">
  An element with a dashed outline
</div>

Using outline-style

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.

Syntax

  outline-style: none | hidden | dotted | dashed | 
                 solid | double | groove | ridge | 
                 inset | outset | initial | inherit;
  

Values

#

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.

More Examples

Click the buttons to see the different outline-style values.

An element with a dotted outline
<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>

Browser support

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

You may also like

Guides