text-decoration-style
Change the pattern of an existing text decoration line.
Overview
| Class | Declarations |
|---|---|
text-decoration-style:dashed | text-decoration-style: dashed;
|
text-decoration-style:dotted | text-decoration-style: dotted;
|
text-decoration-style:double | text-decoration-style: double;
|
text-decoration-style:solid | text-decoration-style: solid;
|
text-decoration-style:wavy | text-decoration-style: wavy;
|
text-decoration-style:<style> | text-decoration-style: <style>;
|
Examples
Use a wavy decoration
text-decoration-style:wavy changes an existing line’s pattern. Compare solid and wavy underlines with the same words, color and thickness.
<!-- Line style · solid --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-color-blue-50 text-decoration-style:solid text-decoration-thickness:2px"> Design together</p><!-- Line style · wavy --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-color-blue-50 text-decoration-style:wavy text-decoration-thickness:2px"> Design together</p>Generated CSS
@layer utilities { .text-decoration-style\:wavy { text-decoration-style: wavy }}If the decoration conveys an error or review state, supply a visible text explanation as well.
Use dashed or dotted lines
The style longhand changes the pattern without removing the underline. Compare dashed, dotted and double lines at the same thickness.
<!-- Line style · dashed --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-color-blue-50 text-decoration-style:dashed text-decoration-thickness:2px"> Design together</p><!-- Line style · dotted --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-color-blue-50 text-decoration-style:dotted text-decoration-thickness:2px"> Design together</p><!-- Line style · double --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-color-blue-50 text-decoration-style:double text-decoration-thickness:2px"> Design together</p>Do not use different patterns as the only distinction between meaningful states.
Return to solid lines
Hover or focus to replace a wavy underline with a solid one. Keep underline in the base state so there is an actual line to restyle.
<!-- Wavy · solid on hover or focus --><button id="target" type="button" class="font-2xl leading-xl underline text-decoration-style:wavy text-decoration-thickness:2px text-decoration-style:solid:hover text-decoration-style:solid:focus-visible"> Design together</button>Use the style longhand here. text-decoration:solid is a shorthand that also resets the line to none.
Apply conditionally
Resize the actual viewport to change a solid underline to dashed at sm on screen. Print uses solid, with the line and thickness preserved.
<!-- Real breakpoint · same underline --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-style:solid text-decoration-thickness:2px text-decoration-style:solid@print text-decoration-style:dashed@screen@sm"> Design together</p>