text-decoration-style

Definition

The text-decoration-style property is used to change the line style set by the family of text-decoration properties.

Here are all of the available values that you can set as text-decoration-style.

HTML

solid

double

dotted

dashed

wavy

Code

  <p class="text-decoration-solid">solid</p>
  <p class="text-decoration-double">double</p>
  <p class="text-decoration-dotted">dotted</p>
  <p class="text-decoration-dashed">dashed</p>
  <p class="text-decoration-wavy">wavy</p>

Syntax

a {
  text-decoration-style: wavy;
}

Values

solid (default), double, dotted, dashed, wavy.

Practical Examples

a {
  text-decoration: underline;
  text-decoration-style: dotted;
}

Alter underline style to match branding or accessibility needs.

HTML

Solid Dotted Wavy

Code

<div class="flex flex-wrap gap-4 text-base text-slate-800">
  <a href="#" style="text-decoration: underline; text-decoration-style: solid;">Solid</a>
  <a href="#" style="text-decoration: underline; text-decoration-style: dotted;">Dotted</a>
  <a href="#" style="text-decoration: underline; text-decoration-style: wavy;">Wavy</a>
</div>

Tips & Best Practices

Use wavy sparingly—it can be harder to read at small sizes.
Combine with text-decoration-color to ensure lines stand out.

Accessibility & UX Notes

Ensure alternative styles still provide adequate contrast.

Browser Support

Supported in modern browsers; IE lacks support.

text-decoration shorthand.
text-decoration-thickness for line weight.
border-bottom as an alternative decoration.