Why is the CSS border-color inheriting the color property?

Question

Is it normal that a border color would be inherited from font's color property? I was surprised to find that:

div  {   border: 4px solid;   color: red;   height: 100px;   width: 100px;  }

<div></div>

JSBIN

gives me a div with a red border. Usually not specifying a color will default to black. What is this odd inheritance?

Answer 1

Based on section 4.1 of the relevant Backgrounds and Borders Module spec, the initial border-color value is currentColor:

CSS Color Module - 4.4. currentColor color keyword

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 for the fill, stroke, stop-color, flood-color, and lighting-color properties.

CSS3 extends the color value to include the currentColor keyword to allow its use with all properties that accept a <color> value. This simplifies the definition of those properties in CSS3.

In other words, the value is treated as the following in your case:

border: 4px solid currentColor; 

Therefore you could also use the currentColor value for something such as the background-color property. For instance:

div {   color: red;   width: 100px;   height: 100px;   border: 4px solid;   background-color: currentColor; }

<div></div>

---

Small fun fact, if you change the font color (e.g. :hover), the bordercolor changes with it! It also works well with transitions!