Never knew that border-color: currentColor was a thing

I had set the value of the border-color as rebeccapurple. But after removing this line the border-color was still rebeccapurple, while this color was nowhere defined, except for the color attribute which has a value of rebeccapurple. So it seems like border-color has a fall-back with currentColor.

So time to do some testing. I started with the full CSS including a border-color.

<div class="alert">Some perfect line fulling content</div>
<style>
   .alert {
       color: rebeccapurple;

       border-color: rebeccapurple;
       border-width: 1px;
       border-style: solid;
   }
</style>

Works as expected. Time to change the value of border-color to currentColor.

<div class="alert">Some perfect line fulling content</div>
<style>
   .alert {
       color: rebeccapurple;

       border-color: currentColor;
       border-width: 1px;
       border-style: solid;
   }
</style>

Still works. The border-color is still the same color. Now as a final test, remove the border-color completely.

​​<div class="alert">Some perfect line fulling content</div>
<style>
   .alert {
       color: rebeccapurple;

       border-width: 1px;
       border-style: solid;
   }
</style>

The border-color is still rebeccapurple. Little bit unexpected, but okay. So I tried to validate this with the inspector tools in Firefox as well in Google Chrome, but they didn’t show the answer. They only showed that the value for the attribute color was set as the value of border-color. But not why this is the case.

So there was only one thing left I could do. Checking the W3C documentation for CSS Color Module Level 3. And there it was:

CSS1 and CSS2 defined the initial value of the ‘border-color’ property to be the value of the ‘color’ property but did not define a corresponding keyword. This omission was recognized by SVG, and thus SVG 1.0 introduced the ‘currentColor’ value. CSS3 extends the color value to include the ‘currentColor’ keyword to allow its use with all properties that accept a value. This simplifies the definition of those properties in CSS3. ​

This spec was published on April 3, 2014. So now we know that when no border-color is set, it always falls back to currentColor. This can be handy in a few cases, like styling alert boxes. Besides border-color, currentColor is also used as fallback for outline-color, text-decoration-color, and column-rule-color.