How to use currentColor in your stylesheet

I've had my head buried so deep in code that I hadn't even noticed this existed. It's a simple way to reference the current text color when writing CSS. Works in modern browsers, including IE9+.

If you use Less or Sass then you probably already use something like @text-color. Alas, CSS doesn't have variables yet, but currentColor will come in handy if you're tired of repeating the same hex codes over and over again. Here's how it works:

div {
    color: #00f;
    border: solid 2px currentColor;
}

That will produce a <div> with blue text and a matching blue border around it. If you need to change it later on, you only need to change it in one place.

Of course, you can use currentColor for other properties too. Box shadows, background colors—pretty much anything. You can even use currentColor with pseudo elements:

div {
    color: #00f;
}

div::after {
    /*
       Styles for CSS triangles or anything else 
       you'd use a pseudo element for go here
    */
    border-color: currentColor;
}

The resulting border-color will be taken from the <div>, which in this case is #00f.

What do you think? Have you heard of currentColor before? Have you used it in a project? What other uses can you find for it in your stylesheet? Get creative!

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.