📌 Introduction

The text-decoration-color property in CSS allows you to set the color of text decorations such as underline, overline, andline-through. It works together with text-decoration-line andtext-decoration-style to fully customize text decoration. 🎨

🧠 What Does text-decoration-color Do?

This property simply defines the color applied to the text decoration. Without it, the decoration inherits the text’s current color. Using this property lets you create beautifully styled links, headings, and highlight effects.

✨ Syntax

text-decoration-color: color;

🎯 Example Usage

.styled-text {
  text-decoration-line: underline;
  text-decoration-color: red;
}

This will underline the text in red even if the text color itself is different.

🧪 More Examples

1. Different text vs underline color

.custom {
  color: black;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

2. Using hex, rgb, hsl, and named colors

.example1 { text-decoration-color: #ff5733; }
.example2 { text-decoration-color: rgb(30, 144, 255); }
.example3 { text-decoration-color: hsl(200, 80%, 50%); }
.example4 { text-decoration-color: gold; }

📋 Supported Values

⚠️ Important Notes

🌟 Real-World Use Case

This property is especially useful when designing links with a custom underline color that doesn’t match the text color — a modern UI trend seen in blogs and editorial websites.

a {
  color: #222;
  text-decoration-line: underline;
  text-decoration-color: #ff4d4d;
  text-decoration-thickness: 2px;
}

🎉 Conclusion

The text-decoration-color property gives you fine-grained control over how text decorations look. By pairing it with text-decoration-line andtext-decoration-style, you can craft beautiful, readable, and modern text elements. 🚀