text-decoration-style 3z2m1i
This property specifies the style of the lines (underlines, overlines and line-throughs) set on the element with text-decoration-line. 3d3450
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 3xs5l
- Syntax:
text-decoration-style: solid | double | dotted | dashed | wavy
- Initial: solid
- Applies To: all elements
- Animatable: no
Values u704t
- 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 2h2053
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 6b4m17
View this demo on the Codrops PlaygroundBrowser 572e63
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.