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
.
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.
/* 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;
Draws a single line.
Draws a double line.
Draws a dotted line.
Draws a dashed line.
Draws a wavy line.
Draws no line. Use text-decoration-line
: none
instead.
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 |
The following creates a red wavy underline:
.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>
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
text-decoration-style |
57 | 79 | 366–39 | No | 44 | 12.18 | 57 | 57 | 366–39 | 43 | 12.28 | 7.0 |
wavy |
57 | 79 | 6 | No | 44 | 8 | 57 | 57 | 6 | 43 | 8 | 7.0 |
text-decoration
shorthand property instead.text-decoration-line
text-decoration-color
text-decoration-thickness
text-underline-offset
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style