"Visited" links show as solid border, not outset border

...whether or not I explicitly define a:visited

[MichaelBluejay]

My links show with the "outset" style border, like they're supposed to, but if a link has been visited, then the border style shows as "solid", meaning just a plain box. Same problem if I remove the "a:visited" definition completely. To try my sample code below, click the first link so that it becomes visited.

What the heck?

<style type=text/css>
#menu a {background:gainsboro; padding:3px; border:2px outset}
#menu a:visited {background:pink; padding:3px; border:2px outset}
</style>

<div id=menu>
<a href="1.htm">one</a>
<a href="2.htm">two</a>
<a href="3.htm">three</a>
</div>

[alt131]

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.

[penders]

...the initial value for border-color is the value of the "color" property.

Interesting that in Chrome/Safari the default border-color, when using the outset style, appears to be based on the background-color, rather than the color property. Which actually gives a better result.

[MichaelBluejay]

Thanks for the help. Okay, I can fix the problem in Safari if I explicitly set the border-color to the same as the background color, but from the report on the other page, I understand that border-outset is gonna be rendered differently in different browsers. Sadness. :(

[alt131]

Interesting that in Chrome/Safari the default border-color, when using the outset style, appears to be based on the background-color, rather than the color property.

I thought so too until I did some further investigating. Now it seems that it was just good luck that MichaelBluejay chose gainsboro, which is a shade of grey. On closer inspection unless a border-color is explicitly set, winSafari (I don't run Chrome) reports "initial" as the border-color under element style, and if you inspect the computed style with inherited ticked that is specified as #fff (white) which resolves to #eee and #9A9A9A - shades of grey.

However, this is further complicated because these are links: If there is no border-color, background-color or color specified, winSafari (and also ff and ie8 but not Op11) default to link colour. winSafari defaults to the color for the visited link, but uses shades of grey based on #fff for the unvisited link. Of course the default link colours also vary.

I understand that border-outset is gonna be rendered differently in different browsers.

At this stage yes - but note the effect can be simulated by explisitly setting each border colour using something like
border:2px solid;
border-color: #eee #aaa #aaa #eee

[penders]

I thought so too until I did some further investigating. Now it seems that it was just good luck that MichaelBluejay chose gainsboro, which is a shade of grey. ...

Ah, yes! :)