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

I just want to show you all the cases you can have regarding border color defined in separate classes.

body {
  color: blue;
}
.colorbefore {
  border-color: red;
}
.easybordered {
  border-left: 3px solid;
}
.complexbordered {
  border-left-width: 3px;
  border-left-style: solid;
}
.colorafter {
  border-color: red;
}

<div class="easybordered colorbefore">
Blue
</div>

<div class="colorbefore easybordered">
Blue
</div>

<div class="easybordered colorafter">
Red
</div>

<div class="complexbordered colorbefore">
Red
</div>

<div class="complexbordered colorafter">
Red
</div>

As already said, what counts is:

• order of the definition of border-style and border-color in the CSS (not the order of the classes given by the "class" attribute")
• border defined as a one-liner or in "pieces" by defining border-style, border-color and border-width
• "color" attribute valid on target div

Answer 2

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)."

Answer 3

You used the shorthand definition of border, but didn't specify the colour so it defaulted to black. You have 2 options:

border-color: red;
border-width: 3px;
border-style: solid

or just properly use the shorthand:

border: 3px solid red;

Answer 4

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

<span>Text sample</span>

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

<span>Text sample</span>

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*/
}

<span>Text sample</span>

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

border: 3px solid red;

Answer 5

Try removing border-color: red; and change border: 3px solid; to border: 3px solid red;

Answer 6

#works {
  border: 3px solid;
  border-color: red;
  }

#broken {
  border-color: red;
  border: 3px solid;
  }

<p id="works">Some Text</p>

<p id="broken">doesn't work</p>

Place the color after the border

border: 3px solid;
border-color: red;

While the other answers are better, this worked on my end.