CSS text-decoration-color Property

Posted in CSS Tutorial

Updated on Jul 19, 2024

By Mari Selvan

👁️ 14 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The text-decoration-color property in CSS is used to set the color of text decorations such as underlines, overlines, and line-throughs. This allows you to customize the appearance of text decorations to match your design preferences, enhancing the visual appeal and readability of your web content.

💡 Syntax

The syntax for the text-decoration-color property is straightforward. It can be applied to any text element, and you can specify a color using any valid CSS color value.

Syntax

Copied

element {
  text-decoration-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the text-decoration-color property is currentColor, which means it inherits the color of the text itself.

🏠 Property Values

Value	Description
named-color	A color keyword, such as blue, red, green, etc.
hexadecimal value	A hex code representing a color, such as #ff5733.
RGB value	An RGB color value, such as rgb(255, 87, 51).
HSL value	An HSL color value, such as hsl(9, 100%, 60%).
currentcolor	The current value of the color property.

📄 Example

In this example, we'll change the text decoration color of an underline to red.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS text-decoration-color Example</title>
  <style>
    .underline {
      text-decoration: underline;
      text-decoration-color: red;
    }
  </style>
</head>
<body>
  <h1>Text with Custom Decoration Color</h1>
  <p class="underline">This text has a red underline.</p>
</body>
</html>

🖥️ Browser Compatibility

The text-decoration-color property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The text-decoration-color property is a useful tool for web developers looking to enhance the visual appeal of their text content.

By customizing the color of text decorations, you can ensure that your text stands out and aligns with your overall design scheme. Experiment with different colors and see how this property can improve the look and feel of your web projects.