CSS Reference Property

text-decoration-style 2v484w

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

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 55184y

  • Syntax:

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

Values 584j31

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

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 k5t66

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 4g1p1d

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.