CSS text-decoration-style Property

What You’ll Learn

The text-decoration-style property defines how decoration lines look — solid, double, dotted, dashed, or wavy.

Introduction

The text-decoration-style property in CSS allows developers to define the style of text decorations applied to text content.

This property can be used to customize the appearance of text underlines, overlines, and line-throughs, giving you control over the visual style of these text decorations. It enhances the ability to create visually distinct and appealing text presentations.

Definition and Usage

Use text-decoration-style when a decoration line already exists and you want to change how that line is drawn. Pair it with text-decoration-line and text-decoration-color for full control.

It is the longhand alternative to setting line style inside the text-decoration shorthand, such as text-decoration: underline wavy red;.

📝 Syntax

The syntax for the text-decoration-style property is simple. It can be applied to any text element to define the style of the text decoration:

element {
  text-decoration-style: style;
}

Here, style can be one of the predefined values that determine the appearance of the text decoration.

Basic Example

a.help-link {
  text-decoration: underline;
  text-decoration-style: wavy;
}

Syntax Rules

• Set a decoration line before applying text-decoration-style.
• Style keywords include solid, double, dotted, dashed, and wavy.
• The default style is solid when a decoration line is present.
• Pair with color and thickness longhands for polished decoration effects.

Related Properties

• text-decoration — shorthand for line, style, color, and thickness
• text-decoration-line — sets which lines appear
• text-decoration-color — sets decoration line color
• text-decoration-thickness — sets line thickness

🎯 Default Value

The default value of the text-decoration-style property is solid, which applies a solid line to the text decoration.

💎 Property Values

When to Use text-decoration-style

text-decoration-style is the right choice when you want to change how a decoration line looks:

• Links — Use dotted or dashed underlines for subtle link styling.
• Spell-check UI — Wavy underlines suggest errors or warnings.
• Emphasis — Double underlines can highlight important terms.
• Design systems — Split line style from color and thickness in separate rules.

Examples Gallery

In this example, we’ll apply different text-decoration styles to various text elements — matching the reference, then exploring practical patterns.

<style>
  .solid {
    text-decoration: underline;
    text-decoration-style: solid;
  }
  .wavy {
    text-decoration: underline;
    text-decoration-style: wavy;
  }
</style>

<p class="solid">This is a solid underline.</p>
<p class="wavy">This is a wavy underline.</p>

.spell-error {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #dc2626;
}

.draft {
  text-decoration: line-through;
  text-decoration-style: dashed;
  color: #94a3b8;
}

.key-term {
  text-decoration: underline;
  text-decoration-style: double;
  text-decoration-color: #7c3aed;
  font-weight: 600;
}

text-decoration-style in the family

text-decoration-style controls how the line is drawn. Combine it with text-decoration-line and text-decoration-color, or use the text-decoration shorthand when you want all parts in one declaration.

.help-link {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #2563eb;
}

💡 Best Practices