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

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

Answer 1

An element in CSS can have two "primary" colours: a foreground colour defined by the colour property and a background colour specified by the background-color property. Many other properties accept a colour value, but having black as the initial colour value would be arbitrary, hence properties that accept a colour value default to the computed foreground colour.

Of course, if the foreground colour is black, this will result in a black border, but only then. And the text colour is only black to begin with because that is what the default UA stylesheets do; CSS does not indicate anywhere that the initial value should be black, simply that it is UA-dependent (CSS1, CSS2.1, CSS Color 3).