CSS outline Property


The outline is the line drawn around the specified element outside of its border to make it more distinct and easier to distinguish.

width of the outline The width of this outline for a specific element is specified using the property. Before using the outline-width property on the desired element, the outline-style property must be declared or used.

Logically, an element must have an outline for which the width can be defined or styled. The outline property of an element is displayed around the element's margin and is not the same as the border property.

Because the outline is not a part of the element's dimensions, the width and height properties of the element do not include the width of the outline.

Syntax

Example

Preview

Property Values

Value Description
outline-width The width of the outline is specified.
outline-style Specifies the outline style.
outline-color The colour of the outline is specified here.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Property Chrome Firefox Safari Edge / IE Opera
outline 1.0 1.5 1.2 8.0 7.0