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;
  border: 3px solid;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

For some reason, border color renders as black, not red as I would expected, as border-color is set after color. Thoughts?

Answer 1

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