Border Color Cascade

The border of the box below this paragraph should be green, not red:

This is because the document has the following stylesheet:

   .a { border-color: red; }
   .b { color: lime; border: solid; } 

The stylesheet expands to:

   .a { 
      border-color: red; 
    }
   .b { 
      color: lime; 
      border-style: solid; 
      border-width: medium;
      border-color: <value of color property>;
    } 

Note that the 'border' shorthand property resets the 'border-color' property to its initial value (which is the resolved value of the color property for that element).

Because the div has class="a b", the following properties apply (all of them):

   border-color: red; 
   color: lime; 
   border-style: solid; 
   border-width: medium;
   border-color: <value of color property>;

Since the first 'border-color' is overriden by the later rule, the relevant properties become:

   color: lime; 
   border-style: solid; 
   border-width: medium;
   border-color: lime;

Hence the border should be lime green.