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