CSS Reference Property

text-decoration-style 291n1v

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

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

  • Syntax:

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

Values 445h6m

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 5w70f

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 51c73

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 375l1b

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.