CSS text-decoration-color Property

CSS text-decoration-color property specifies the color of the text-decoration line. The color value can be specified in any valid CSS color formats like ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc. See the example below:

Example:

.p1{
  text-decoration-line: underline;
  text-decoration-color: red;
}
.p2{
  text-decoration-line: underline;
  text-decoration-color: #3215eb;
}
.p3{
  text-decoration-line: underline;
  text-decoration-color: rgb(21, 235, 28);
}

CSS Syntax

The text-decoration-color property has the following syntax:

text-decoration-color: color|transparent|initial|inherit;

Property Values

The text-decoration-color property accepts the following values:

colorSets the color of the decoration line. It can be any valid CSS color. The default value is currentColor.
transparentSets a transparent decoration line.
initialSets the text-decoration-color property to its default value(currentColor).
inheritInherits the text-decoration-color property from the parent element.

General Info

Default ValuecurrentColor
InheritedNo
JavaScript Usageelement.style.textDecorationColor = “blue”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.