If you’ve used CSS3 border-radius, particularly with webkit browsers, you may have seen something like this

When the background color or image of an element with border-radius applied is quite distinct from the background color of the element it is on top of, this nasty bled effect can potentially make the use of border-radius impossible.

What’s actually happening is that the background color (or image) is being clipped to the border box (which is the default border clip). With anti aliasing, some of the background color or image is visible outside the curved border (this doesn’t happen with square borders). But with CSS3 we can also clip the border to the padding box, and the content box (though not the margin box) using the background-clip property, and the keywords padding-box, border-box and content-box (as of September 2010, this potentially requires a vendor specific extension)

We can use this to largely get rid of the background bleed by setting the background-clip to padding-box like so

background-clip: padding-box

Perfect? no. Improved? Sure. Hope this comes in handy some day!