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.
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>
text-decoration-style: solid | double | dotted |
dashed | wavy | initial | inherit;
| 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. |
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>
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 | |
