CSS border rendering order

[Perfect Member Name]

If you set the top, right, bottom, and left borders of an element to use different colours, you'll notice that the right border sits "above" the top and bottom borders, but the left border sits "below" the top and bottom borders (in IE).

Meaning, the top right and bottom right pixels use the colour defined for border-right. But the top left and bottom left pixels use the colour defined for border-top, and border-bottom, respecively.

How can I get the left border to render "above" the top and bottom borders?

[Hester]

I believe each browser renders borders in a different order. Have you tried setting them in different orders in your code?

[choster]

Both IE and Mozilla will draw a diagonal line fom the outer corner to the inner corner where the color shift occurs. The problem occurs when, as I assume the OP wants, you reduce the border-width to 1px, at which point the browser cannot mathematically split the difference in the corner box so it chooses one over the other.

CSS does not specify how the user agent (e.g. browser) should handle that scenario. And the current module draft for CSS3 states explicitly This specification does not define how borders of different styles should be joined in the corner.

If that one-pixel deviation is going to be a problem, I suppose you could use background graphics.