You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.

Border-Color Shorthand Problems

This document contains the following stylesheet.

     DIV   { height: 8em; width: 8em;
             border: solid 20px; margin: 5px; }
     DIV.a { border-color: navy maroon green teal; }
     DIV.b { border-top-color: navy;
             border-right-color: maroon;
             border-bottom-color: green;
             border-left-color: teal; }

This means that DIV's of class a and b should have exactly the same color and style, as border-color is a shorthand property for the border-*-color properties.

There now follows a DIV with class a and a DIV with class b.

Using shorthand... incorrect rendering.

Using longhand... correct rendering.

As can be seen, Opera is misinterpreting the border-color property.