CSS
🎯 CSS text-decoration-color Property
The text-decoration-color property defines the color of text decoration lines such as underline, overline, or line-through.
It allows you to style decorative text lines with custom colors like red, blue, green, or HEX/RGB values.
💬 What is text-decoration-color used for?
This property is mainly used to improve design visibility and highlight text decorations.
For example, you can make links more noticeable by coloring their underline differently from the text.
🔹 Basic Usage
CSS
text-decoration-color: red;
➡️ This sets the decoration line color to red.
🧩 Values
| Value | Description |
|---|---|
| color | Sets the line color (red, blue, #hex, rgb) |
| initial | Resets to default browser value |
| inherit | Inherits value from parent element |
1. Red Underline
HTML
<p style="text-decoration: underline; text-decoration-color: red;">
Underlined text in red
</p>
2. Blue Overline
HTML
<p style="text-decoration: overline; text-decoration-color: blue;">
Overlined text in blue
</p>
3. Green Strikethrough
HTML
<p style="text-decoration: line-through; text-decoration-color: green;">
Strikethrough text in green
</p>
🔍 Quick Summary
- text-decoration-color sets the color of text decoration lines
- Works with text-decoration-line and text-decoration-style
- Accepts color names, HEX, RGB values
-
🧠 Summary
- The text-decoration-color property allows you to customize the color of text decoration lines.
- It improves UI clarity and makes links or highlighted text more visually appealing.
- It is often combined with underline, overline, and strikethrough effects for modern web design.