Rounded corners on transparent borders are doubling translucency in Chrome

When adding border-radius to an element with a transparent border, Chrome seems to double up opacity on the corners, making them translucent.

Code and example at: http://jsfi开发者_如何学Pythonddle.net/shodan_uk/LMPMg/

Anybody got any ideas how to get round this?

Cheers, Terry

This is a known bug of Webkit, you can either add a wrapping container to fake the border and apply border-radius, or change the opacity value or the border slightly (this will produce some faint lines on the corner of your element.

See demo here: http://jsfiddle.net/duopixel/hG9W8/

And here is the a similar question to yours: Weird border opacity behavior in Webkit?

Yes I've had a similar issue. i used css3 border image instead to get the same effect as originally intended.