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.

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

Initial valuesolid
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 57Edge No support NoFirefox Full support 36
Full support 36
No support 6 — 39
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE No support NoOpera Full support 44Safari Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android Full support 36
Full support 36
No support 6 — 39
Prefixed
Prefixed Requires the vendor prefix: -moz-
Opera Android Full support 44Safari iOS Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android Full support 7.0
wavyChrome Full support 57Edge No support NoFirefox Full support 6IE No support NoOpera Full support 44Safari Full support YesWebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android Full support 6Opera Android Full support 44Safari iOS Full support YesSamsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

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

Document Tags and Contributors

Last updated by: wbamberg,