[css3-color] [css3-background] translucent borders in Webkit

I've recently noticed that when using rgba borders in webkit, in which the alpha is less than one, that the corners get double amounts of "ink" at the corners, as though each adjoining border edge overlapped the others at the corners. It is very unwanted, always, and the other browsers I checked (Firefox, IE9) don't do that, but I can't find anything in CSS3 Color or Backgrounds & Borders 3 that prohibits it. I think it should.

Here is a test, which in FF4 and IE9 create a even colored border, but in Safari creates a tartan/cross pattern:

<div style="width:50px; height:50px; background:#888;border:50px solid rgba(0,0,0,.7);"/>

Adding a border-radius doesn't help, as I hoped it might, but once the radius gets bigger than the border-width, then the plaid effect goes away and is replaced by a thin "X" pattern. Which you can see with this:

<div style="width:50px; height:50px; background:#888;border:50px solid rgba(0,0,0,.7);border-radius:5px;"/>

In Safari, you can paste those into the snippet editor to get a quick view of the problem. In the other browsers, you can use something like this:

http://htmledit.squarefree.com/

Received on Friday, 25 February 2011 07:25:26 UTC