CSS outline-width Property

The outline-width property specifies the width 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-width value of medium.

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

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

Using outline-width

The outline-width property accepts any length value, such as, px, pt, em, etc.

The default width is medium or 1 pixel.

When outline is set to 0 or none, it's not visible.

Outlines are designed to draw attention to the element.

Syntax

outline-width: medium | thin | thick |
               length | initial | inherit;

Values

#

Value Description
medium Default. Medium outline. 1 pixel wide.
thin Thin outline
thick Thick outline
length Sets outline thickness using CSS units
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-width values.

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

<div class="outline-example">
  An element with a thin outline width
</div>

Browser support

This table shows when outline-width 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