CSS Reference Property

text-decoration-style

This property specifies the style of the lines (underlines, overlines and line-throughs) set on the element with text-decoration-line.

The style is applied to all lines on an element, so if both, an over- and an underline are added, both will get the same style. There is currently no way to set different styles on different lines applied to an element.

The text-decoration-style property can be used to create solid lines, dotted lines, dashed lines, wavy lines, or double lines (two lines in place of one). It also accepts a inherit value, which will apply the same decorations to an element as those of its parent.

Official Syntax

  • Syntax:

    text-decoration-style: solid | double | dotted | dashed | wavy
  • Initial: solid
  • Applies To: all elements
  • Animatable: no

Values

solid
draws a single line over, under, or through the text. (See text-decoration-line).
double
draws two lines over, under, or through the text.
dotted
draws a dotted line over, under, or through the text.
dashed
draws a dashed line over, under, or through the text.
wavy
draws a wavy line over, under, or through the text.
inherit
inherits the line style from those of its parent.

Examples

The following makes the underline applied to all h1 elements dotted. The underline is added using the text-decoration-line property.

h1 {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}
                

Browser Support

This property is supported in Chrome and Opera with the -webkit- prefix, in Firefox with the -moz- prefix, and on Android.

It is not currently supported on iOS, Internet Explorer, and Safari.

Written by . Last updated February 3, 2015 at 12:35 pm by Pedro Botelho.

Do you have a suggestion, question or want to contribute? Submit an issue.