CSS - text-decoration-style

Example

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

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

<p class="example">This is how it looks.</p>

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 double dotted dashed wavy

Is one of the following keywords :

Keyword	Description	Comment
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	Do not draw a line	Do not use : use text-decoration-line: none instead

inherit

Is a keyword indicating to reuse the value calculated on the parent element.

Formal syntax

solid <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> double <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> dotted <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> dashed <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> wavy

Description  

The text-decoration-style CSS property defines the style of the lines specified by text-decoration-line. The style applies to all lines, there is no way to define different style for each of the line 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 disabled styling in some cases, the semantic meaning won't disappear in such a situation.

Browser Compatibility  

Specifications  

License