Why does CSS border color inherit from the font’s color property?
Is it normal that a border color would be inherited from font’s
color property? I was surprised to find that:
gives me a div with a red border. Usually not specifying a color will default to black. What is this odd inheritance?
CSS1 and CSS2 defined the initial value of the
border-colorproperty to be the value of the
colorproperty but did not define a corresponding keyword. This omission was recognized by SVG, and thus SVG 1.0 introduced the
currentColorvalue for the
CSS3 extends the color value to include the
currentColorkeyword 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:
Small fun fact, if you change the font color (e.g.
:hover), the bordercolor changes with it! It also works well with transitions!