Loading Please Wait...
CSS text-decoration is a shorthand property used to set the appearance of the decoration line such as style, color, width, etc.
/* Keyword values */
text-decoration: overline 5px;
text-decoration: underline red;
line: sets the type of the decoration line such as none, underline, overline, line-through, and blink.
color: sets the color of the decoration line such as color name, RGB, RGBA, HEX, HEXA, HSL, HSLA, etc.
style: sets the style of the decoration line such as solid, double, dotted, dashed, wavy.
thickness: sets the thickness of the decoration line such as auto, 1px, 1rem, 10%, etc..
Global values: inherit, initial, revert, revert-layer, unset.
/* Single value */
text-decoration: overline;
/* 2 value */
text-decoration: overline red;
text-decoration: line-through 5px;
/* 3 value */
text-decoration: overline red dotted;
text-decoration: line-through 5px red;
/* 4 value */
text-decoration: overline red 5% wavy;
text-decoration: underline red 1rem dotted;
/* multiple lines value */
text-decoration: overline underline red 5% dashed;
/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;
CSS text-decoration-line property is used to set the type of the decoration line.
Keyword values: none, underline, overline, line-through, blink.
Global values: inherit, initial, revert, revert-layer, unset.
/* Single keyword */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
/* Multiple keywords */
text-decoration-line: underline overline; /* Two decoration lines */
text-decoration-line: overline underline line-through; /* Multiple decoration lines */
/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;
CSS text-decoration-color property is used to set the color of the decoration line.
Keyword Values: transparent, currentcolor.
Color names: red, blue, green, etc.
Hex and HEXA: #fff, #ffffff, #ffffffaa.
RGB and RGBA: rgb(20, 100, 52), rgba(20, 100, 52, 0.85).
HSL and HSLA: hsl(20, 100%, 52%), hsla(20, 100%, 52%, 0.85).
Global values: inherit, initial, revert, revert-layer, unset.
/* color values */
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;
/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: revert-layer;
text-decoration-color: unset;
CSS text-decoration-style property is used to set the style of the decoration line.
Keyword Values: solid, dashed, dotted, wavy, double.
Global values: inherit, initial, revert, revert-layer, unset.
/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;
CSS text-decoration-thickness property is used to set the thickness of the decoration line.
Keyword Values: auto, from-font.
Length Values: 10px, 1rem.
Percentage Values: 5%, 10%.
Global values: inherit, initial, revert, revert-layer, unset.
/* Single keyword */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;
/* length */
text-decoration-thickness: 0.1em;
/* percentage */
text-decoration-thickness: 10%;
/* Global values */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: revert-layer;
text-decoration-thickness: unset;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved