border-radius fails under safari (ugly clipping)

Question

Does anybody know a workaround for folowing 'bug' in Safari?

When I use border-radius to create rounded borders in CSS3 it just works fine on Safari, FF and so on.

But when the border-color is the color like in the background you can see the containers background overlapping the border.

You can try it here: http://de.roundedcorner.org/css3-rounded-corner-generator Just set the border-color and sites background to #333333

Thanks for your help!

Answer 1

That's most likely due to background clipping.

The following should correct that.

-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

For some more on background-clip, have a look here: https://developer.mozilla.org/en/CSS/background-clip

Answer 2

The background-clip property is used to determine whether the backgrounds extends into the border or not. The default is border-box, which means it DOES extend into it, but if you set it to padding-box, it doesn’t. if you use content-box the background only extends to the content area. (source: http://www.css3.info/preview/background-origin-and-background-clip/)

Solution for your problem is to use: -webkit-background-clip: padding-box;

It’s important to note that if you are using the shorthand notation to specify your other background properties then this should be added after those. It seems that the shorthand notation implies a default clip value which will override one that’s previously set. (source: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed)