Why is this CSS class styling order-dependent?

Question

.container {
   border: 4px solid;
}

and another class

.border-red {
   border-color:red;
}

and my html

<div class="container border-red"> </div>

The border color does not apply to the element unless i put the .border-red class before .container

Please check for demo JSFIddle

Answer 1

The reason is that this

.container {
   border: 4px solid;
}

is actually shorthand for

.container {
   border-width: 4px;
   border-style: solid;
   border-color: ** current font color **;
}

Consequently, the later style overrides the previous border-color declaration.

Border @ MDN

Answer 2

It is order dependent because border: is a shorthand of border-style: + border-width: + border-color:.