Aug 24

webkit-background-clip comparison

Like me, you may have been frustrated with the visual artifacting in Safari when using rounded corners that appears to let some of the background colour of the rounded element bleed through and muddy the rounded corner effect. Well, thanks to Mike Harding for his post with the solution. Set the following CSS property for the affected element:

-webkit-background-clip: padding-box;

Mike also warns, “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. ”

If you have other tips on how to improve web designs, please pass them on and we will post them here.

Cheers,RLM.

preload preload preload