W3cubDocs

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

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 syntax

solid | double | dotted | dashed | wavy

Examples

.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;
}

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

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

Specifications

Specification	Status	Comment
CSS Text Decoration Module Level 3 The 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.

Initial value	`solid`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	57	No	36 36 6 — 39 Prefixed Prefixed Requires the vendor prefix: -moz-	No	44	Yes Prefixed Yes Prefixed Prefixed Requires the vendor prefix: -webkit-
`wavy`	57	No	6	No	44	Yes

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	57	57	No	36 36 6 — 39 Prefixed Prefixed Requires the vendor prefix: -moz-	44	Yes Prefixed Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	7.0
`wavy`	57	57	No	6	44	Yes	7.0