🎨 Mastering text-decoration-style in CSS

📌 Introduction

The text-decoration-style property in CSS defines the style of text decoration lines such as underline, overline, orline-through. It works in combination with text-decoration-line andtext-decoration-color to create fully customized text decorations. ✨

🧠 What Does text-decoration-style Do?

This property controls the appearance of the decoration line — whether it's solid, dashed, dotted, double, or wavy. It helps you create unique text looks for headings, links, and emphasis. 🎯

✨ Syntax

Basic Syntax

text-decoration-style: solid | double | dotted | dashed | wavy;

🎯 Available Styles

StyleDescription
solidDefault straight line
doubleTwo parallel lines
dottedA dotted decoration
dashedA dashed decoration
wavyA wavy / squiggly underline

🧪 Example Usage

1. Solid Underline (default)

Solid Underline

.solid {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
2. Dotted Underline

Dotted Style

.dotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}
3. Dashed Underline

Dashed Style

.dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}
4. Double Underline

Double Line

.double {
  text-decoration-line: underline;
  text-decoration-style: double;
}
5. Wavy Underline

Wavy Underline

.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

🎨 Combined Styling Example

Underline with Style + Color

.fancy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #ff5733;
}

This creates a decorative wavy underline with a beautiful orange color. 🔥

⚠️ Important Notes

Note

Note:text-decoration-style has no visible effect unlesstext-decoration-line is applied.

Note

Some styles (like wavy) may render slightly differently across browsers.

🌟 Real-World Use Cases

  • Beautiful link styling in blogs ✍️
  • Highlight features in landing pages 💡
  • Creative headings for portfolio websites 🎨
  • Accessibility-friendly emphasis markers 🔍

Modern Blog Link Example

a {
  color: #222;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #0077ff;
  text-decoration-thickness: 2px;
}
>>“Design is the silent ambassador of your brand — even small details like the underline style matter.” 🌟

🎉 Conclusion

The text-decoration-style property is a powerful tool for customizing text decoration visuals. Whether you want subtle dotted lines or creative wavy effects, this property gives you full control over the style and personality of your text. 🚀