text-decoration-style

solid — the default text-decoration: underline solid

double — two lines underline double

dotted — dots one thickness wide underline dotted

dashed — dashes three thicknesses wide underline dashed

wavy — a zigzag underline wavy

on the other lines

overline dashed

line-through dashed

underline overline dotted

text-decoration-color

underline dotted red

underline wavy #00a000

any order: #d00 dashed line-through

currentColor is the initial value, so this follows color

longhands

text-decoration-line: underline

+ text-decoration-style: dotted

+ text-decoration-color: #c0f

shorthand resetting

SOLID: the shorthand after -style: dashed resets it

WAVY RED: -line alone must not reset style or colour

in the wild

The W3C abbr idiom (normalize.css) — dotted underline, not a missing one.

a spell-check style wavy red underline

text-decoration-thickness

2px — dashes and dots scale with the thickness

3px dashed

4px wavy

0.125em dotted

10% (of 1em) double

auto — a tenth of the em, as Chrome draws it (1px at 16px text)

from-font — drawn as auto, there is no font metric to read

0 — no line at all

via the shorthand: underline 3px wavy #d00

at 30px, where the thickness grows with the text

dotted (auto thickness — 3px here, 1px at 16px text)

dashed at .125em — now ~4px

wavy

double