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.
An element with outline-width value of medium.
<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>
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.
outline-width: medium | thin | thick |
length | initial | inherit;
| 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. |
Click the buttons to see the different outline-width values.
<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>
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 |
