text-decoration-style
Quick Summary for text-decoration-style
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.
Code Usage for text-decoration-style
/* 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: unset; More Details for text-decoration-style
text-decoration-style
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.
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: unset; Values
solidDraws a single line.
doubleDraws a double line.
dottedDraws a dotted line.
dashedDraws a dashed line.
wavyDraws a wavy line.
-moz-noneDraws no line. Use text-decoration-line: none instead.
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
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; } <p class="wavy">This text has a wavy red line beneath it.</p> Specifications
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-style-property |
See also
When setting multiple line-decoration properties at once, it may be more convenient to use thetext-decoration shorthand property instead. text-decoration-line text-decoration-color text-decoration-thickness text-underline-offset Last modified: Jan 18, 2022, by MDN contributors
Select your preferred language English (US)EspañolFrançais日本語Português (do Brasil)中文 (简体) Change language
