text-decoration-style

Sets the visual style of the decoration lines. You can make underlines wavy, dashed, dotted, or double.

It is documented as part of the CSS Text Decoration specification.

/* Usage Example */
.warning-text {
  text-decoration: underline;
  /* Makes the underline look like a red squiggle */
  text-decoration-style: wavy;
  text-decoration-color: red;
}

/* Syntax */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;
Widely available Since 2015 95% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

57+
36+
12.1+
79+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC