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

Blue



Blue



Red



Red



Red

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