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 January 2020.
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
css
/* 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
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
text-decoration-style =
solid |
double |
dotted |
dashed |
wavy
Examples
Setting a wavy underline
The following creates a red wavy underline:
CSS
css
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
HTML
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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-decoration-style
|
|
|
|
|
|
|
|
|
|
|
|
|
dashed
|
|
|
|
|
|
|
|
|
|
|
|
|
dotted
|
|
|
|
|
|
|
|
|
|
|
|
|
double
|
|
|
|
|
|
|
|
|
|
|
|
|
solid
|
|
|
|
|
|
|
|
|
|
|
|
|
wavy
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
See also
- When setting multiple line-decoration properties at once, it may be more convenient to use the
text-decorationshorthand property instead. text-decoration-linetext-decoration-colortext-decoration-thicknesstext-underline-offset