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;
}
Live Demo
View this demo on the Codrops PlaygroundBrowser 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.
