CSS outline-style Property

Last Updated : 28 Aug, 2024

The outline-style property in CSS is used to set the appearance of the outline of an element. The outline and border of an element are similar, but not the same. The outline does not take space and it is drawn outside the border of an element. Also, the outline is drawn around all four sides of the element by default, and there is no way to alter this.

Syntax:

outline-style: auto|none|dotted|dashed|solid|double|groove|ridge|
inset|outset|initial|inherit;

Property Values:

auto: It sets the outline of an element through the browser.

Syntax:

outline-style: auto;

Example:

Output:

👁 CSS Property | outline-style-auto

none: It is the default value and it sets the outline width to zero. Hence, it is not visible.

Syntax:

outline-style: none;

Example:

Output:

👁 CSS Property | outline-style-none

dotted: It is used to set a series of dots around the element as outline.

Syntax:

outline-style: dotted;

Example:

Output:

👁 CSS Property | outline-style-dotted

dashed: It is used to set a series of dashed line segment around the element as outline.

Syntax:

outline-style: dashed;

Example:

Output:

👁 CSS Property | outline-style-dashed

solid: It is used to set solid line segment around the element as outline.

Syntax:

outline-style: solid;

Example:

Output:

👁 CSS Property | outline-style-solid

double: It sets a doubled line segments around the element as outline. The width of the outline is equal to the sum of width of the individual line segments and space between them.

Syntax:

outline-style: double;

Example:

Output:

👁 CSS Property | outline-style-double

groove: It sets grooved line segments around the element as the outline, which makes feel that it is carved.

Syntax:

outline-style: groove;

Example:

Output:

👁 CSS Property | outline-style-groove

ridge: It sets ridged line segments around the element as outline, which makes feel that it is extruding. It is opposite to that of a groove.

Syntax:

outline-style: ridge;

Example:

Output:

👁 CSS Property | outline-style-ridge

inset: It sets embedded line segments around the element as the outline, which makes us feel that it is fixed in the display.

Syntax:

outline-style: inset;

Example:

Output:

👁 CSS Property | outline-style-inset

outset: It sets line segments around the element which appears to be coming out, as outline. It is opposite of inset.

Syntax:

outline-style: outset;

Example:

Output:

👁 CSS Property | outline-style-outset

initial: It is used to set outline-style property to its default value. It sets the width of the outline to zero. Hence, the outline is not visible.

Syntax: