Web/CSS/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.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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: 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

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

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	Status	Comment
CSS Text Decoration Module Level 3The definition of 'text-decoration-style' in that specification.	Candidate Recommendation	Initial definition. The `text-decoration` property is now a shorthand to define multiple related properties.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`text-decoration-style`	Chrome Full support 57	Edge Full support 79	Firefox Full support 36 Full support 36 No support 6 — 39 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	IE No support No	Opera Full support 44	Safari Full support 12.1 Full support 12.1 Full support 8 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 36 Full support 36 No support 6 — 39 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	Opera Android Full support 43	Safari iOS Full support 12.2 Full support 12.2 Full support 8 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 7.0
`wavy`	Chrome Full support 57	Edge Full support 79	Firefox Full support 6	IE No support No	Opera Full support 44	Safari Full support 8	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 6	Opera Android Full support 43	Safari iOS Full support 8	Samsung Internet Android Full support 7.0

Legend

Full support: Full support
No support: No support
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.