W3cubDocs

/CSS

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: unset;

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 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

.example {    
       -moz-text-decoration-line: underline;
       -moz-text-decoration-style: wavy;
       -moz-text-decoration-color: red;    
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-style: wavy;
    -webkit-text-decoration-color: red;
}

CSS

.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

HTML

<p class="wavy">This text has a wavy red line beneath it.</p>

Results

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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
text-decoration-style 57 79 36
36
6 — 39
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
No 44 12.1
12.1
8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
wavy 57 79 6 No 44 8
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
text-decoration-style 57 57 36
36
6 — 39
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
43 12.2
12.2
8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
7.0
wavy 57 57 6 43 8 7.0

See also

  • When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

© 2005–2020 Mozilla and individual 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