The CSS 2.1 spec on border conflict resolution is clear on how to draw borders. Earlier versions were not.
<style type="text/css"> table.test td { border-width: 8px; border-style: solid; } </style> <table class="test" summary="Test" style="border-collapse: collapse"> <tr> <td style="border-color: red">R</td> <td style="border-color: green">G</td> <td style="border-color: blue">B</td> </tr> <tr> <td style="border-color: green">G</td> <td style="border-color: blue">B</td> <td style="border-color: red">R</td> </tr> <tr> <td style="border-color: blue">B</td> <td style="border-color: red">R</td> <td style="border-color: green">G</td> </tr> </table>
R | G | B |
G | B | R |
B | R | G |
Opera renders the table borders such the the border to the right or bottom has precendence (Opera probably renders left-right top-bottom and the later borders are drawn over the top of earlier borders). IE 7 is the only browser that conforms to the published spec.
Opera 9.62 | |
IE 7.0.5730.11 CSS2.1 Standard | |
Firefox 3.04 | |
Safari 3.2 (525.26.13) |