CODEWITHSUNDEEP
css
1252748
1252748

Reputation: 15369

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

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?

enter image description here

Upvotes: 49

Views: 36839

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241078

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!

Upvotes: 73

BoltClock
BoltClock

Reputation: 724112

In CSS, an element can have one of two "primary" colors: a foreground color, specified by the color property, and a background color, specified by the background-color property. Lots of other properties accept a color, but having black as the initial color value would be very arbitrary, so instead properties that accept a color value take on the computed foreground color by default.

Of course, this can result in a black border if the foreground color is black, but only then. And the text color is only black to start with because the default UA stylesheets make it so; CSS does not state anywhere that the initial value should be black, but that it is UA-dependent (CSS1, CSS2.1, CSS Color 3). For example, a UA in high-contrast mode or inverted-colors mode could specify the default color scheme to be white on black, or a different color combination entirely:

Windows High Contrast Demo

This behavior has been around since CSS1. The currentColor value, introduced in CSS Color 3 based on the equivalent SVG keyword, is now listed as the initial value of the respective properties in the respective CSS3 modules:

Using attr() with a color value also falls back to currentColor when a value cannot be found. See CSS Values 3.

Prior to CSS3 there was no way to restore the color of a border or outline to the computed foreground color once overridden; see my answer to this related question. While this question uses the word "inherit", it should be noted that specifying border-color: inherit does not inherit from the color property — like all other CSS properties, it inherits from the border-color of the parent element.

1 The default is actually to invert the colors of the pixels underneath the outline, but supporting invert is not mandatory and if a browser chooses not to, the foreground color must be used instead.

Upvotes: 17

Related Questions