text-decoration-color property

Contents

Definition and Usage
Syntax
Values
Examples
Compatibility
Desktop browsers
Mobile browsers

Definition and Usage

The text-decoration-color CSS property sets the color used when drawing underlines, overlines, or strike-throughs specified by text-decoration-line. This is the preferred way to color these text decorations, rather than using combinations of other HTML elements.

InitialcurrentColor
Applies toall elements
Inheritedno
Mediavisual
Computed ValueIf the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
Animatableyes, as a color
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <color>

text-decoration-color: currentColor
text-decoration-color: red
text-decoration-color: #00ff00
text-decoration-color: rgba(255, 128, 128, 0.5)
text-decoration-color: transparent
text-decoration-color: inherit

Values

<color>: The color property accepts various keywords and numeric notations. See <color> values for more details.

Examples

.example { 
  
    text-decoration: underline; 
  
    text-decoration-color: red; 
  
}

The example above has the same effect as the following code, which also adds a hover style.

<!DOCTYPE html> 
  
<html> 
  
<head> 
  
<style> 
  
.example { 
  
  font-size: 24px; 
  
  text-decoration: underline; 
  
  color: red; 
  
} 
  
.example:hover { 
  
  color: blue; 
  
  text-decoration: line-through; 
  
} 
  
</style> 
  
</head> 
  
<body> 
  
<span class="example"> 
  
  <span style="color:black">black text with red underline and blue hover</span> 
  
</span> 
  
</body> 
  
</html>

Compatibility

Desktop browsers

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	Not supported	6.0 (6.0)-moz	Not supported	Not supported	Not supported (537.33) -webkit

Mobile browsers

Feature	Android	Firefox mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	Not supported	6.0 (6.0)-moz	Not supported	Not supported	Not supported