The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line. The style applies to all lines that are set with text-decoration-line.

/* Keyword values */ text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy;  /* Global values */ text-decoration-style: inherit; text-decoration-style: initial; text-decoration-style: revert; text-decoration-style: unset; 

text-decoration-style

The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line. The style applies to all lines that are set with text-decoration-line.

If the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like <del> or <s>. As browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation.

When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

Syntax

/* Keyword values */ text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy;  /* Global values */ text-decoration-style: inherit; text-decoration-style: initial; text-decoration-style: revert; text-decoration-style: unset; 

Values

solid

Draws a single line.

double

Draws a double line.

dotted

Draws a dotted line.

dashed

Draws a dashed line.

wavy

Draws a wavy line.

-moz-none

Draws no line. Use text-decoration-line: none instead.

Formal definition

Initial value	solid
Applies to	all elements. It also applies to ::first-letter and ::first-line.
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

solid | double | dotted | dashed | wavy

Examples

Setting a wavy underline

The following creates a red wavy underline:

CSS

.wavy {   text-decoration-line: underline;   text-decoration-style: wavy;   text-decoration-color: red; } 

HTML

<p class="wavy">This text has a wavy red line beneath it.</p> 

Results

Specifications

Specification
CSS Text Decoration Module Level 3 # text-decoration-style-property

See also

When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. text-decoration-line text-decoration-color text-decoration-thickness text-underline-offset

Last modified: Jan 18, 2022, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語Português (do Brasil)中文 (简体) Change language