CSS text-decoration-style Property

A text decoration is an underline, an overline, or a strike-through line.

The text-decoration-style property sets the decoration line style.

Valid values include solid, wavy, dotted, dashed, or double.

Example

#

Text with a wavy text-decoration-style.

Text with a styled underline

<style>
  .wave {
    text-decoration-line: underline;
    text-decoration-style: wavy;
  }
</style>

<p class="wave">
  Text with a styled underline
</p>

Syntax

text-decoration-style: solid | double | dotted | 
              dashed | wavy | initial | inherit;

Values

#

Value Description
solid Default. Single line
double Double line
dotted Dotted line
dashed Dashed line
wavy Wavy line
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different text-decoration-style values.

Text decorated with a double underline

<style>
  .deco-style {
    text-decoration-line: underline;
    text-decoration-style: double;
  }
</style>

<p class="deco-style">
  Text decorated with a double underline
</p>

Browser support

This table shows when text-decoration-style support started for each browser.

Chrome
57.0 Mar 2017
Firefox
36.0 Feb 2015
IE/Edge
Not Supported
Opera
44.0 Nov 2017
Safari
Not supported

You may also like

Guides