Why Is the CSS Border-Color Inheriting the Color Property

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

<div></div>

Why doesn't border color work with value inherit?

From MDN

Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.

So use longhand properties for inheritance instead.

Why does table td border color inherit from tr element color?

It is not a bug. You have set the color for the tr to red, the td inherits color from its parent and is therefore also red. Lastly, you have set the border-style and border-width of the td, but you did not set the border-color. border-color defaults to currentcolor, which is the text color of the element: in this case red.

Through a series of inheritance and default values, it is working as intended.

Why is border-color overridden by color ?

Why is “border-color” overridden by “color”? .... border color renders as black, not red as I would expect, as border-color is set after color. Thoughts?

Your problem lies within how you've declared your border- properties:

border-color: red;  /* sets the border color to red */
border: 3px solid;  /* sets the border color to default (black) */

You're using the shorthand for all border properties using border, and since you didn't specify any color within border, it's set to the default color, which is black in this case, as defined by the color property¹. And since you're declaring border after border-color, you're over-riding red with black.

Simply remove border-color and specify any border color within the border property...

border-color: red;      /* <-- REMOVE THIS LINE */
border: 3px solid red;  /* set the border color here */

---

¹ "A <color> denoting the color of the border. If not set, its default value is the value of the element's color property (the text color, not the background color)."

CSS: border-color:inherit

Problem is your parent has no border color set. So just set the border color to the parent. Something like this: https://jsfiddle.net/evpsthx3/9/

<div class="parent red">
<a class="cta">BUTTON</a>
</div>

<div class="parent green">
<a class="cta">BUTTON</a>
</div>



.parent.red {
  background-color: red;
  border-color: red;
}

.parent.green {
  background-color: green;
  border-color: green;
}

Why does an inherited border-color attribute become ineffective?

Because border-color, unlike some css properties, doesn't have inherit as its default value.

So you have to specify it to be border-color: inherit.

http://jsfiddle.net/3f8vgd35/

W3 Description states that it is Inherited: NO

CSS inherited border color seems to be ignored

The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn?

It's not working because 1px solid inherit is an invalid value:

According to MDN, you can't use the inherit value as part of a shorthand declaration (like in your case). Here is the relevant, in-depth quote:

Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.

Which means that you would need to use the longhand border-color property in order to inherit the border-color value:

Example Here

a:link,
a:visited {
  border: 1px solid;
  border-color: inherit;
}

Secondarily, I would like to know how to prevent the text from jumping.

If you don't want the inherited border color, simply use a transparent border to displace the added border:

Example Here

a {
  border: 1px solid transparent;
}
a:hover {
  border: 1px solid red;
}

Alternatively, rather than using a border, you could also use the outline property to add an outline to the element that doesn't affect the element's box model:

Updated Example

a:hover {
  outline: 1px solid red;
}

---

Related Topics