## CSS text-decoration-color Property
The `text-decoration-color` property in CSS sets the color of any text decorations (such as underlines, overlines, or line-throughs) applied to an element.
This property allows you to style text decorations independently from the text color itself, giving you greater creative control over your typography.
---
## Definition and Usage
The `text-decoration-color` property specifies the color of the text decoration line (underline, overline, line-through).
> **Note:** This property only has a visible effect if the element has an active, visible `text-decoration-line` applied to it (either directly or inherited).
### Property Specifications
| Feature | Specification |
| :--- | :--- |
| **Default Value:** | `currentColor` (inherits the text color of the element) |
| **Inherited:** | No |
| **Animatable:** | Yes (the color transitions smoothly) |
| **CSS Version:** | CSS3 / CSS Text Decoration Module Level 3 |
| **JavaScript Syntax:** | `object.style.textDecorationColor = "red"` |
---
## CSS Syntax
```css
text-decoration-color: color | initial | inherit;
```
### Property Values
| Value | Description |
| :--- | :--- |
| *color* | Specifies the color of the text decoration. Accepts any valid CSS color value (HEX, RGB, RGBA, HSL, HSLA, or named colors). |
| `initial` | Sets the property to its default value (`currentColor`). |
| `inherit` | Inherits the property from its parent element. |
---
## Code Examples
### Example 1: Basic Usage
In this example, we apply a red underline to a paragraph. The text remains the default color (usually black), but the underline is colored red.
```css
p {
text-decoration: underline;
text-decoration-color: red;
}
```
### Example 2: Combining Multiple Decorations and Colors
You can style different text decorations with custom colors. In this example, we use a line-through with a blue color.
```html
Original Price: $49.99
Check out our new arrivals!
```
### Example 3: Shorthand Usage
The `text-decoration-color` property is often set using the `text-decoration` shorthand property, which combines `text-decoration-line`, `text-decoration-style`, and `text-decoration-color`.
```css
/* line | style | color */
a {
text-decoration: underline wavy orange;
}
```
---
## Browser Compatibility
Modern web browsers fully support the `text-decoration-color` property.
* **Supported Browsers:** Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Opera.
* **Legacy Note:** Older versions of Firefox (prior to version 36) required the vendor prefix `-moz-text-decoration-color`. Legacy Internet Explorer (IE 11 and below) does not support this property.
YouTip