text-decoration-style
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
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
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
HTML
Results
Specifications
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-style-property |
Browser compatibility
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