UPDATED October 30, 2011: This bug has been fixed in Chrome 15.0.874.106.
UPDATED August 16, 2011: This bug has been fixed in Safari 5.1 but not in Chrome.
Using Google Chrome or Apple Safari? I am using Chrome myself and recently, while I was working on a project, I attempted to use CSS3’s rgba feature on a 10px wide border. While this worked in Opera 11, Firefox 3.6.13, IE 8 & 9 – it did not work in Chrome 9 and Safari 5.
When viewed in Chrome or Safari, the borders appear to overlap in the corners. In the other browsers, the border is one solid line. After doing some searching I found out that I definitely was not the only person to notice this bug. Fortunately, people have submitted bug reports to Webkit about this issue. Hopefully, they will eventually fix the problem.
I have created a sample test page which shows a box with two divs. The main div has the rgba border while a second div holds the content. I have constructed the box like this because the background color of a box affects how the border is displayed when using rgba. I added text with large font at the top and used rgba in it’s color property to show that rgba works just fine.
When the bug is fixed, I will remove the page.
GophaSpeak 