Changing the Underline Color in CSS: The Definitive Guide

Underlines in text can visually separating important content. By default browsers render underlines in black color. However, with CSS we can customize the underline color to create more engaging text effects.

In this comprehensive guide, you will learn different ways to change underline colors using CSS.

The text-decoration-color Property: An Overview

The text-decoration-color property in CSS is used to set the color of decoration lines like underlines or overlines.

The syntax is straightforward:

text-decoration-color: color;

Where color can be any valid CSS color value like:

• Color names – red, green etc
• HEX values – #ffffff
• RGB values – rgb(255, 255, 255)
• HSL values – hsl(360, 100%, 50%)
• RGBA values – rgba(255, 255, 255, 0.5)
• HSLA values – hsla(360, 100%, 50%, 0.5)

Internally, the browser renders the decoration line (underline) using the specified color.

Now let‘s look at various examples of using this property.

Example 1: Change Underline Color using Color Names

The simplest way to change the underline color is using basic color names like red, blue, green etc.

Here is sample HTML code with underlined elements:

<h1 style="text-decoration: underline">Sample Heading</h1>

<p>This paragraph has <b style="text-decoration: underline">underlined</b> text.</p> 

Let‘s style the underlines:

h1 {
   text-decoration-color: red; 
}

b {
  text-decoration-color: green;
}

This sets heading underline to red and bold text underline to green.

Output:

Any valid CSS color name can be used to get the desired underline effect.

Browser Support: Works in all major browsers.

---

Example 2: Using HEX Values to Change Underline Colors

HEX color values are a convenient way to set colors in CSS. The HEX format represents colors using a 6 digit code like #ffffff.

Here is an example with HEX values:

h1 {
  text-decoration-color: #fa3421; /* HEX for red-orange */
}

b {
  text-decoration-color: #47f33e; /* HEX for green */   
}

This sets the <h1> underline to a red-orange color and <b> underline to green.

Output:

The advantage of HEX values is the ability to choose from a wider palette of colors.

Browser Support: Works across all modern browsers.

---

Example 3: Using RGB & RGBA Color Values

The RGB color model defines colors using varying intensities of Red, Blue and Green channels.

This provides fine grained control over setting the underline color tones.

RGB Usage

Here is an example with RGB values:

/* Heading underline */
h1 {
  text-decoration-color: rgb(236, 64, 122);  
}

/* Bold text underline */ 
b {
  text-decoration-color: rgb(45, 209, 16);   
} 

This sets the heading underline to a pink color and bold text underline to green.

Output:

We can tune the RGB combination to create any custom underline color.

RGBA Usage

The RGB color model supports opacity/transparency through RGBA values:

rgba(red, green, blue, alpha);

The alpha parameter controls transparency – with value from 0 (fully transparent) to 1 (fully opaque).

Let‘s set semi-transparent underlines with RGBA:

h1 { 
  text-decoration-color: rgba(236, 64, 122, 0.7); /* 70% pink */  
}

b {
  text-decoration-color: rgba(45, 209, 16, 0.5); /* 50% green */
}

Output:

So RGBA allows creating underlines with transparency.

Browser Support: RGBA color values are supported in all modern browsers.

---

Example 4: Using HSL and HSLA Color Values

HSL is an alternative color system defining colors using:

• Hue
• Saturation
• Lightness

Let‘s see how to use HSL and HSLA values:

/* Heading underline with HSL */
h1 {
  text-decoration-color: hsl(326, 78%, 62%); 
}

/* Bold text underline with HSLA */
b {
  text-decoration-color: hsla(97, 55%, 42%, 0.7);   
}

Output:

HSL and HSLA provides an intutive way to modify underline colors.

Browser Support: HSL/HSLA has excellent browser support.

---

Example 5: Styling Link Underlines

The text-decoration-color property can be used to style underlines on links as well.

<p>Useful article on <a href="/content">Coding Best Practices</a> - check it out!</p>

Let‘s style the link:

/* Unvisited link */
a:link {
  text-decoration: underline;
  text-decoration-color: #1e90ff;
}

/* Visited link */
a:visited {
  text-decoration-color: #8a2be2;
}

/* Hover state*/  
a:hover {  
   text-decoration-color: orange;
}

/* Active state */
a:active {
  text-decoration-color: red;    
}

This customizes link underlines based on different states.

Output:

So links can have underlines with different colors for enhanced aesthetics.

Browser Compatibility: Works across modern browsers.

---

Combining Multiple text-decoration Values

We can also apply multiple text decorations simultaneously like:

text-decoration: underline overline line-through; 

Let‘s set custom colors for each:

h1 {
  text-decoration: underline overline line-through;
  text-decoration-color: red orange yellow;   
}

The colors will be applied to the decorations based on their order.

Output:

This shows how multiple text-decorations can be customized individually.

Browser Compatibility: Works in modern browsers except IE.

---

Cross-Browser Support and Fallbacks

The text-decoration-color property works across all modern browsers.

It has over 88% global usage:

Older browsers like IE do not support it fully.

We can use a simple fallback for older browsers:

h1 {
  text-decoration-color: red;  
  color: red; /* Fallback for old browsers */
} 

If text-decoration-color is not supported, the color property will create the underline effect.

So this ensures broader compatibility.

---

Why Use text-decoration-color Over text-shadow?

Both text-decoration-color and text-shadow can be used to create underlined text effects.

However there are some important differences:

text-decoration-color	text-shadow
Sets colors specifically for text-decorations like underlines and overlines	Applies shadow effect – not optimized for underlines
Allows more customization control over underline styling	Generic property for other effects like blurring, offset etc
Natively supported for text underlining across browsers	Simulates underline, may not work perfectly across browsers
Simple and lightweight	More complex for simulating underline
Better performance	Can impact rendering performance

As we can see, text-decoration-color clearly is best suited for custom coloring text underlines.

It has better browser support for it. text-shadow has a different use case of applying text effects like shadows, glows etc.

So text-decoration-color should be preferred for underline specific styling needs.

---

How Does text-decoration-color Property Work?

Internally the text-decoration-color property sets color of the line that renders under the text as underline.

The steps would be:

1. Browser renders text elements based on specified styles
2. The text-decoration property defines type of decoration like underline
3. text-decoration-color sets the drawing color for these decorations
4. Browser draws the underline in selected color under text

Some key points:

• It directly colors the decoration line – no proxies
• Fast and native browser rendering support
• Allows dynamic color changes via CSS without affecting other text properties
• Works for other decorations like overline or line-through too!

So text-decoration-color offers great flexibility and performance for custom underlined text effects.

Creative Uses of text-decoration-color Property

With the ability to colorize underlines, creative text effects are possible:

🔹 Gradual underlines – Use gradient color values to smoothly transition the underline from one color to another.

🔹 Duotone effect – Use multiple background colors along with dual-tone underlines for a stylish look.

🔹 Rainbow underlines – Create fun rainbow underlines by changing colors on active/hover states.

🔹 Alert messages – Use red/green underlines to highlight important alerts and notices.

🔹 Sophisticated themes – For modern, elegant websites use sleek colored underlines that blend with the theme.

There are endless possibilities!

Here are some examples showing creative uses of colored underlines:

So you can utilize this property in innovative ways.

---

Best Practices For Readability

When setting custom underline colors, ensure sufficient contrast between the text and underline colors.

Low contrast is harder to read:

Some best practices to follow:

✔ Use darker underlines with light text colors for optimal viewability.

✔ Avoid similar hues for both text and underline – hard to distinguish.

✔ Use online contrast checkers to identify less accessible color combos.

✔ Have fallbacks with high contrast for low vision accessibility.

Following these principles will help in creating easy to read customized underlines.

---

Conclusion

In this guide, we explored how to leverage the text-decoration-color property to create attractive text underlining effects.

Some key points:

• text-decoration-color allows changing underline colors easily
• Works with color names, HEX, RGB/RGBA, HSL/HSLA color values
• Can be used to style link underlines in different states
• Ensure sufficient contrast between text and underline
• Has great cross-browser support

This completes our in-depth tutorial on customizing text underline colors using CSS. I hope you enjoyed it and gained value! Let me know if you have any other questions.

Happy coding!