1. Web
  2. CSS
  3. Reference
  4. Properties
  5. text-decoration-style

text-decoration-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

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.

Try it

text-decoration-style: solid; 
text-decoration-style: double; 
text-decoration-style: dotted; 
text-decoration-style: dashed; 
text-decoration-style: wavy; 
<section id="default-example"> <p> I'd far rather be <span class="transition-all" id="example-element">happy than right</span> any day. </p> </section> 
p { font: 1.5em sans-serif; } #example-element { text-decoration-line: underline; }

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

css
/* 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;

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 valuesolid
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

text-decoration-style = 
 solid |
 double |
 dotted |
 dashed |
 wavy

Examples

Setting a wavy underline

The following creates a red wavy underline:

CSS

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

HTML

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

Results

Specifications

Specification
CSS Text Decoration Module Level 3
# text-decoration-style-property

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content