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:

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 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;
}

---

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