alt131 - 12:16 pm on Nov 30, 2011 (gmt 0)

Hi Michael, thanks for raising such an interesting issue. We had a brief discussion in relation to tables in June [webmasterworld.com] (part way through thread), and Lucy posted some test results in Table borders - outset and ridge [webmasterworld.com]. Tables borders are slightly different to ordinary borders, but there are similarities.

I see two issues in your specific example. Although on a visual inspection the border-colours appear the same in some browsers, inspecting using a colour selection tool shows there is a colour difference between the top/left and right/bottom borders as would be expected for outset.

The second issue is the reason for the lack of visual contrast and the cross-browser variations. 8.5.2 Border color [w3.org] specifies the initial value for border-color is the value of the "color" property. 8.5.3 Border style says:

The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's border color properties, but UAs may choose their own algorithm to calculate the actual colors used. For instance, if the 'border-color' has the value 'silver', then a UA could use a gradient of colors from white to dark gray to indicate a sloping border.

The result is that UA's have considerable discretion when drawing border-colors. That increases when there is no border-color specified so the initial value defaults to that specified for color, and the discretion further increases when no value has been specified for colour either.