For many years the most I did with text-decoration was to set it to either underline or none. I never really explored it more that that. Recently I stumbled accross the ability to set far more than just that.

Some of these are more recent properties. Most of these are fairly widely adopted (>90%) so there should be little issue with using these in production code.


Usage is the same as any other color property, so don’t really need an explanation here.

For the longest time I would use border bottom to be able to have a different colored underline. Now with text-decoration-color, I can very easily set a different underline (or overline) color.


This is the same as the old text-decoration property that we all grew up with. Possible values are none, underline, overline, and line-through. The values are pretty self-explanitory.

The text-decoration-line is the only property that can handle multiple values ex. text-decoration-line: overline underline line-through;. At this time multipe values for the other properties is not supported.


While it doesn’t have all the options that border-style would have, it still offers solid, double, dotted, dashed, and wavy.


With this property you can set the thickness of the line using a length or percent. You can also set from-font, though not all will have that information.

text-decoration shorthand?

Yes you can use the text-decoration property with shorthand. So you can do something like text-decoration: underline overline 2px red wavy; and it will work. you can also start with setting text-decoration and just override a single property. For example you could change the style on hover.

Bonus properties

Here are a few extra properties that you can use to style your text-decoration. These aren’t part of the text-decoration shorthand, and aren’t as widely supported.


This controls how/when the line gets broken. I’m not going to go into details about this one, as it is in itself a short hand for text-decoration-skip-self, text-decoration-skip-box, text-decoration-skip-inset, text-decoration-skip-spaces, text-decoration-skip-ink and it doesn’t have widespread support yet (no support from Apple)

text-underline-position & text-underline-offset

Not sure how useful these are right now, at least to RTL languages.