CSS | text-decoration-color Property
This property is used to specify the color of decorations(overlines, underlines, and line-throughs) over the text.
Syntax:
text-decoration-color: color|initial|inherit;
Property values:
-
color: Sets the color of the text-decoration.
Syntax:text-decoration-color: color;
Example:
<!DOCTYPE html>
<
html
lang
=
"en"
dir
=
"ltr"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>text-decoration</
title
>
<
style
>
h1 {
color: green;
}
body {
text-align: center;
}
table {
margin: auto;
}
th {
padding: 10px 25px;
}
.underline {
text-decoration: underline wavy;
}
.overline {
text-decoration: overline solid;
}
.line-through {
text-decoration: line-through double;
}
.red td {
text-decoration-color: red;
}
.green td {
text-decoration-color: green;
}
.blue td {
text-decoration-color: blue;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
> text-decoration-color: color;</
h2
>
<
table
>
<
tr
>
<
th
>underline</
th
>
<
th
>line-through</
th
>
<
th
>overline</
th
>
</
tr
>
<
tr
class
=
"red"
>
<
td
class
=
"underline"
>Hello Geeks!</
td
>
<
td
class
=
"line-through"
>Hello Geeks!</
td
>
<
td
class
=
"overline"
>Hello Geeks!</
td
>
</
tr
>
<
tr
class
=
"green"
>
<
td
class
=
"underline"
>Hello Geeks!</
td
>
<
td
class
=
"line-through"
>Hello Geeks!</
td
>
<
td
class
=
"overline"
>Hello Geeks!</
td
>
</
tr
>
<
tr
class
=
"blue"
>
<
td
class
=
"underline"
>Hello Geeks!</
td
>
<
td
class
=
"line-through"
>Hello Geeks!</
td
>
<
td
class
=
"overline"
>Hello Geeks!</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
-
initial: Sets this property to its default value.
Syntax:text-decoration-color: initial;
Example:
<!DOCTYPE html>
<
html
lang
=
"en"
dir
=
"ltr"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>text-decoration</
title
>
<
style
>
h1 {
color: green;
}
body {
text-align: center;
}
#example {
text-decoration: underline double;
text-decoration-color: initial;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
> text-decoration-color: initial;</
h2
>
<
div
id
=
"example"
>
This text-decoration-color of this text is set to initial.
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- Google Chrome 57.0
- Firefox 36.0
- Opera 44.0
- Safari 7.1
Supported browsers: The browsers supported by text-decoration-color Property are listed below: