CSS: Set Underline Color Easily (With Practical Code Examples)

Underlines are one of the most common ways to highlight links or emphasize text on the web. But did you know that CSS now allows you to change the underline color independently from the text color?

This subtle design touch can dramatically improve readability, accessibility, and the overall aesthetic of your site.

In this blog post, we’ll show you how to set underline color in CSS the easy way, with practical code examples you can start using today.

---

🔍 The Problem: Default Underlines Are Boring

Traditionally, underlined text uses the same color as the text itself:

a {
  text-decoration: underline;
  color: #000;
}

This works, but it’s limited. You can’t style the underline separately—until now.

---

✅ The Modern Solution: text-decoration-color

CSS introduces text-decoration-color to set the color of the underline (or any text decoration) independently.

💡 Syntax:

selector {
  text-decoration: underline;
  text-decoration-color: <color>;
}

---

🛠️ Practical Code Examples

🔹 Example 1: Underline with Custom Color

a {
  text-decoration: underline;
  text-decoration-color: red;
}

<a href="#">This link has a red underline</a>

---

🔹 Example 2: Underline Color on Hover

a {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s ease;
}

a:hover {
  text-decoration-color: #1e90ff; /* Dodger blue */
}

<a href="#">Hover me!</a>

✅ Result: No underline initially visible, but appears in color on hover—great for modern interactive designs!

---

🔹 Example 3: Different Text and Underline Colors

.highlight {
  color: #333;
  text-decoration: underline;
  text-decoration-color: orange;
}

<p class="highlight">Custom underline color independent of text color</p>

This gives your design more control and polish.

---

✨ Bonus: Combine with text-underline-offset and text-decoration-thickness

For extra styling control:

a {
  text-decoration: underline;
  text-decoration-color: #ff6347;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

This makes the underline:

• Thicker
• Offset from the text
• With a custom color

<a href="#">Stylish underline with spacing and color</a>

---

⚠️ Browser Compatibility

Most modern browsers fully support text-decoration-color, including:

• Chrome ✅
• Firefox ✅
• Edge ✅
• Safari ✅

For best results, always test on your target browsers, especially if using older versions.

---

🧠 Summary

Property	Purpose
text-decoration	Adds underline/overline/line-through
text-decoration-color	Sets color of the decoration
text-decoration-thickness	Sets thickness of the line
text-underline-offset	Controls distance from the text

---

🏁 Final Thoughts

The days of dull underlines are over. With just a few lines of CSS, you can create clean, modern, and accessible underline styles that match your brand and UX needs.

Experiment with colors, thickness, and offsets to create visually pleasing effects that enhance your website’s design without overwhelming users.