WookieCoder WookieCoder - 5 months ago 7
CSS Question

Why is "border-color" overridden by "color"?

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

border-color overriden by color .... border color renders as black, not red as I would expect, as border-color is set after color. Thoughts?

The color and border-color properties have absolutely nothing to do with each other. The former only applies to text and the latter only applies to borders.

In other words, your problem lies solely 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. 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 */
Comments