Sneak

Fixing the background ‘bleed’

I recently came up against an issue in Safari where the background colour of an element seemed to ‘bleed’ through the edge of the corners when applying both borders and a border-radius (see the image above). After seeing David Cole tweet about the same issue I resolved to find a solution, and it came in the form of the -webkit-background-clip property.

-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. Your mileage may vary, but it worked a treat for me. Read more about the available values for the property here.

Update: This post has been generously translated into Bulgarian by Albert Ward.