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 specified; there is no way to define different styles for each of the lines defined by text-decoration-line
. 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: unset;
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.
Initial value | solid |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
- solid
- Draws a single line.
- double
- Draws a double line.
- dotted
- Draws a dotted line.
- dashed
- Draws a dashed line.
- wavy
- Draws a wavy line.
- -moz-none
- Draws no line. Use
text-decoration-line
: none
instead.
Formal syntax
solid | double | dotted | dashed | wavy
Examples
.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 | Status | Comment |
---|---|---|
CSS Text Decoration Module Level 3 The definition of 'text-decoration-style' in that specification. |
Candidate Recommendation | Initial definition. The text-decoration property is now a shorthand to define multiple related properties. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 57 | 6.0 (6.0) - 39.0 (39.0)-moz 36.0 (36.0) |
No support | 44 | (Yes)-webkit- |
wavy | 57 | 6.0 (6.0) | No support | 44 | (Yes)-webkit- |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 57 | 57 | 6.0 (6.0)- 39.0 (39.0)-moz 36.0 (36.0) |
No support | 44 | (Yes)-webkit- |
wavy | 57 | 57 | 6.0 (6.0) | No support | 44 | (Yes)-webkit- |
See also
- When setting multiple line-decoration properties at once, it may be more convenient to use the
text-decoration
shorthand property instead.