CSS outline-style Property


The outline-style property in CSS is used to customize the appearance of an element's outline. An element's outline and border are similar but not the same. The outline does not take up any space and is drawn outside of an element's border. Furthermore, by default, the outline is drawn around all four sides of the element, and there is no way to change this.

Syntax

Example

Preview

Property Values

Value Description
none There is no outline specified. This is the default setting.
hidden This property specifies a hidden outline.
dotted A dotted outline is specified.
dashed A dashed outline is specified.
solid Defining a solid outline
double A double outliner is specified.
groove This option specifies a 3D grooved outline. The effect is determined by the value of the outline-color.
ridge This option specifies a 3D ridged outline. The effect is determined by the value of the outline-color.
inset This option specifies a 3D inset outline. The effect is determined by the value of the outline-color.
outset This property specifies a 3D outset outline. The effect is determined by the value of the outline-color.
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-style 1.0 1.5 1.2 8.0 7.0