This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

Summary

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.

• Initial value : solid
• Applies to: all elements
• Inherited : no
• Percentages: n/a
• Media: visual
• Computed value : the value as specified via the syntax

Syntax

text-decoration-style: 	inherit     or
text-decoration-style:  style

where :

inherit

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

style

Is one of the following keywords :

Keyword	Description	Live example	Comment
solid	Draws a single line	Lorem ipsum
double	Draws a double line	Lorem ipsum
dotted	Draws a dotted line	Lorem ipsum
dashed	Draws a dashed line	Lorem ipsum
wavy	Draws a wavy line	Lorem ipsum
-moz-noneNon-standard	Do not draw a line	Lorem ipsum	Do not use : use text-decoration-line : none instead

Examples

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

This is how it looks.

Specifications

Browser compatibility

See also

• CSS Reference index

• text-align , text-indent
• text-decoration , text-decoration-color , text-decoration-line ,text-decoration-style
• letter-spacing , word-spacing ,white-space
• text-transform , text-rendering , text-shadow