Geek Answers Handbook

Border-radius fails under safari (ugly cropping)

Does anyone know a workaround for the "bug" in Safari?

When I use border-radius to create rounded borders in CSS3, it works fine in Safari, FF, etc.

But when the border color is a background-like color, you can see that the background of the containers overlaps the border.

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

Thank you for your help!

+6
html safari css3
source share
2 answers

This is most likely due to clipping of the background.

The following should fix it.

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

For more information about background-clip, see here: https://developer.mozilla.org/en/CSS/background-clip

+14
source share

The background-clip property is used to determine whether the background extends to the border or not. By default, a border frame is used, which means that it SHOULD extend to it, but if you set it to the padding box, it is not. if you use a content field, the background only extends to the content area. (source: http://www.css3.info/preview/background-origin-and-background-clip/ )

The solution to the problem is to use: -webkit-background-clip: padding-box;

It is important to note that if you use abbreviated notation to specify other background properties, this should be added after that. The shorthand notation seems to imply a default clip value that will override the previously set one. (source: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed )

+2
source share

More articles:


All Articles