CSS outline Property

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.

Example

#

An element with a border and a dashed outline.

An element with a border and an 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>

Using outline

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.

Syntax

outline: outline-width outline-style outline-color | initial | inherit;

Values

#

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.

Did you know?

Did you know?

Difference between outline and border

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.


Browser support

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

You may also like

Guides