The outline property defines an outline for an element.
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 a border and a dashed outline.
<style>
.outline {
border: 3px solid steelblue;
outline: 5px dashed salmon;
padding: 25px;
}
</style>
<div class="outline">
An element with a border and an outline.
</div>
The outline specifies an custom outline surrounding the element's border.
The outline property is shorthand property for:
An outline is not a part of the element's size calculations.
Therefore, an outline does not affect the element's dimensions.
outline: outline-width outline-style outline-color | initial | inherit;
| Value | Description |
|---|---|
| outline-width | The outline width. Default is medium (1 pixel). |
| outline-style | The outline style. Default is none (no line). |
| outline-color | The outline color. Default inherits from text color. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
Both properties create a line surrounding the element with the same syntax. Difference?
The border property is drawn on the edge of the element.
The outline property is drawn outside the element.
The outline is not clickable and is not used in space and size calculations.
This table shows when outline 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 |
