CSS Reference Property


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


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


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.