Why is “border-color” overridden by “color”?

Question

I have the following css:

.isActiveFilter {
  color: black;
  background-color: rgba(0, 184, 170, .5);
  padding: 15px 10px 10px 10px;
  border-color: red;
  bor         


        

Answer 1

The border CSS property is a shorthand property... border-width, border-style, and border-color... A 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)... - MDN

The shorthanded border: 3px solid; (without a color), the color is then inherited from the color value of the element. Example 1:

span {
  color: blue;
  border: 3px solid;
}

Text sample

If color is undefined on the element, it will look for the color on the parent element, if it's also undefined on the parent, it will fallback to the browser default color which is black. Example 2:

body {
  color: green;
}
span {
  border: 3px solid;
}

Text sample

And the order matters, if you set it with the following order, It will work as expected. Example 3:

span {
  border: 3px solid; /*first*/
  border-color: red; /*second*/
}

Text sample

But, it would be easier to use a complete shorthanded set:

border: 3px solid red;