How to use currentColor in your stylesheet

Heads up! This post was written in 2014, so it may contain information that is no longer accurate. I keep posts like this around for historical purposes and to prevent link rot, so please keep this in mind as you're reading.

— Cory

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.