CSS: Set Underline Color Easily with Practical Code

Text underlining is a classic styling choice in web design—especially for links and emphasized content. But did you know you can style the underline color independently from the text color using modern CSS?

In this blog post, you’ll learn how to change the underline color in CSS using the latest properties, with practical examples that work seamlessly across modern browsers.

Table of Contents

✅ Why Customize Underline Color?

Customizing the underline color allows you to:

Improve accessibility and readability
Match your site’s color palette
Add a modern touch to link aesthetics
Distinguish underlines from regular text decoration

Let’s dive into the code.

🧩 The CSS `text-decoration-color` Property

To change the color of an underline, use the text-decoration-color property.

✅ Basic Syntax:

selector {
  text-decoration: underline;
  text-decoration-color: yourColor;
}

🧪 Example: Change Underline Color to Blue

<p class="custom-link">Visit our website</p>

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

🟦 Result: The text will remain black, but the underline will be blue.

🎨 Example with Custom Colors

Let’s apply a different text color and a contrasting underline color.

<p class="fancy-link">Hover over me!</p>

.fancy-link {
  color: #ff6600;
  text-decoration: underline;
  text-decoration-color: #00ccff;
}

🔶 Text Color: Orange
🔷 Underline Color: Cyan

🚀 Bonus: Combine with `text-decoration-style`

You can go even further with underline styles!

.fancy-link {
  color: #4CAF50;
  text-decoration: underline;
  text-decoration-color: #F44336;
  text-decoration-style: wavy;
}

🌊 Now your green text will have a red, wavy underline. Perfect for drawing attention to key content.

💡 Browser Support

Modern browsers (Chrome, Firefox, Edge, Safari) fully support text-decoration-color. It is safe to use in production.

📵 Internet Explorer does not support this property. Consider fallbacks or progressive enhancement if needed.

🧠 Summary

Use text-decoration-color to style the underline separately from text.
Pair it with text-decoration-style for more creativity.
This small tweak can significantly improve your site’s visual appeal and accessibility.

🛠️ Full Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Underline Color Demo</title>
  <style>
    .custom-link {
      color: #222;
      text-decoration: underline;
      text-decoration-color: #0077cc;
      text-decoration-thickness: 2px;
    }
  </style>
</head>
<body>
  <p class="custom-link">This is a styled underline!</p>
</body>
</html>

🔚 Final Thought

Mastering subtle details like underline color can elevate your web design. With just a couple of CSS properties, you gain powerful control over text decoration.