CSS Reference Property

text-decoration-style 1t3c5l

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

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 52n3v

  • Syntax:

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

Values 6u6u2p

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 2w2wp

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 3n3564

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

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

Further Reading 3k5138

Written by

Last updated June 3, 2020 at 12:35 pm by Pedro Botelho

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