Published by Chris Coyier

CSS variables are always a hot topic when "the future of CSS" is discussed. They are actually coming natively, but using them in production (without a CSS preprocessor framework) is a long way off. However there is a feature that actually has some browser support now that has a CSS variable feel to it, and that's the currentColor value.

It works like this:

div { 
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;

I learned about this from a panel at SXSW 2011 on CSS3 with Stephanie & Greg Rewis, Estelle Weyl, and Christopher Schmitt. Googling it turned up Divya Manian's article who says: can use this value to indicate you want to use the value of color for other properties that accept a color value: borders, box shadows, outlines, or backgrounds.

This value was first supported by Opera in 2009, since then, Firefox 3.5+, Chrome 1+, and Safari 4+.

My own testing showed it work in: Firefox 4 and Opera 11, but NOT in Chrome 11 or Safari 5 (perhaps WebKit dropped it)1

It will follow the cascade

body { color: red; }
div { border: 5px solid currentColor; }

You can't trick it.

Let's say you wanted to exploit the variable quality to it, but then reset the color for the actual text... this won't work:

div {

   color: red;
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor; 
   color: black;

Everything will be black.


Between the limited browser support, the fact you can't trick it, and that it's only used for a single color makes use cases for this pretty few and far between. If you can think of a good one, please share!

Update: here's a cool one - using it in animation.

1 This isn't in the spec, so if it doesn't work in a particular browser, it's not a matter of failure of standards support.