Customize Underlines with text-decoration in CSS

Published on September 3, 2020


Customize Underlines with text-decoration in CSS

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

They say good things come to those who wait, and this turns out to be very true when it comes to text decoration on the web. The CSS Text Decoration Module Level 3 defines a few great new ways to decorate text on the web, and browsers are finally starting to have good support for them. The times of using border-bottom instead of a proper text underline in order to get a different underline color may finally come to pass.

Results may vary: support is still limited, so the examples in this post may not display correctly depending on the browser you’re using.


The text-decoration property used to be only about a choice between values of none, underline, overline and line-through, but with the new recommendation is becomes a shorthand for the new text-decoration-color, text-decoration-style and text-decoration-line properties. For example, here’s a colored double underline:

.fancy {
  -webkit-text-decoration: hotpink double underline;
  text-decoration: hotpink double underline;

Fancy Underline


Works just as you would imagine. Finally a way to change the text decoration color!


text-decoration-style is used to define the type of text decoration, and the new recommendation brings two new values: double and wavy:

.wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;

Wavy Decoration


text-decoration-line accepts values of underline, overline, line-through and blink (blink is deprecated however):

.strike {
  -webkit-text-decoration-color: red;
  text-decoration-color: red;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;

Strike This


With text-decoration-skip we can avoid having the decoration step over parts of the element its applied to. The possible values are objects, spaces, ink, edges and box-decoration.

  • ink: Finally, a way to prevent text decoration from overlapping glyph descenders:
.ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;


  • objects: The text decoration skips elements that have a display of inline-block. It’s also the initial value:
<p class="super">
  Getting <span style="display: inline-block;">Very</span> Fancy
.super {
  -webkit-text-decoration: peru solid overline;
  text-decoration: peru solid overline;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;

Getting Very Fancy

The remaining values are not yet well supported by browsers:

  • spaces: The decoration skips spaces and punctuation.
  • edges: Creates a gap when two elements with text decoration are next to each other.
  • box-decoration: The decoration skips any inherited margin, padding or border.


With text-underline-position we have yet another way to control the positioning of text decoration in relation to the glyphs. The possible values are auto, under, left and right.

With auto, the initial value, browsers will usually place the decoration close to the text baseline:

.auto {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: auto;
  text-underline-position: auto;


…and notice now how, with under, the decoration is placed after the text descenders:

.under {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;


The left and right values for text-underline-position are used to control text decoration in vertical writing modes.

Now go on and impress us with some fancy text decoration!

Browser Support: As of 2020, Can I Use text-decoration? shows that 94% of browsers worldwide have at least partial support for the property.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel