The text-decoration Shorthand Property & text-decoration Property in CSS

The text-decoration shorthand property can set a color, lines, or style of its own and also can rely on the text-decoration-style property and text-decoration-color property. However, the text-decoration-line property cannot set the color or style of its own. It relies on the text-decoration-style property and text-decoration-color property to generate the color and style respectively.

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {
    text-decoration:  underline #d825ef dashed;
}
#p2 {
    text-decoration:  underline overline;
    text-decoration-style: solid;
    text-decoration-color: blue;
}
#p3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #ff63fa;
}

#p4 {
  text-decoration-line: underline line-through overline;
  text-decoration-style: wavy;
}
</style>
</head>
<body>
    <p id="p1">Text Decoration</p>
    <p id="p2">Text Decoration</p>
    <p id="p3">Text Decoration</p>
    <p id="p4">Text Decoration</p>
</body>
</html>