`text-decoration-style` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since July 2015.

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.

Try it

text-decoration-style: solid;

text-decoration-style: double;

text-decoration-style: dotted;

text-decoration-style: dashed;

text-decoration-style: wavy;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-decoration-line: underline;
}

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: revert-layer;
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
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

text-decoration-style = 
  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

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`text-decoration-style`	57	79	36 6–39	44	12.1 8	57	36 6–39	43	12.2 8	7.0	57	12.2 8
`dashed`	57	79	6	44	8	57	6	43	8	7.0	57	8
`dotted`	57	79	6	44	8	57	6	43	8	7.0	57	8
`double`	57	79	6	44	8	57	6	43	8	7.0	57	8
`solid`	57	79	6	44	8	57	6	43	8	7.0	57	8
`wavy`	57	79	6	44	8	57	6	43	8	7.0	57	8