Border Radius = Background Bleed

Ok so I've been through answers like "background-clip: padding-box;" and while it makes the end product look a little better, it still doesn't completely solve the problem of the background color bleeding outside of the border. Does anyone have a real solution to this issue?

Here's a screenshot of the issue:

CSS Used For Buttons

#footer #pager li a {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: block;
    float: left;
    color: #444 !important;
    text-decorat开发者_Python百科ion: none !important;
    background-clip: padding-box !important;
    padding: 8px 12px;
    background-color: #ccc;
    border: 1px solid #000;
}

---

It's not what you're waiting for, I know, but I have to say this: use an image. This is not only due to the possibility to eliminate the bleed on all browsers. Your bleed problem on Firefox is nothing compared to how Chrome mercilessly slaughters the look of your buttons... Check it and start crying :(.

In case you're wondering what's wrong: Chrome is utterly helpless when you use border-radius and box-shadow:inset on the same element. It's a known bug and you can't eliminate it until they fix it in the browser (and judging by how "fast" they are to respond to some bug reports - some have been reported two years ago and still are unsolved, even when the users offer a ready solution - I think we shouldn't expect Chrome to work properly in the near future).

[EDIT]

Also, note this:

• Firefox produces the bleed effect
• Opera doesn't render CSS3 gradients
• IE doesn't render box shadow
• Chrome fails in the worst manner possible

So... there isn't a single browser which renders your button correctly. Does it make sense to keep using CSS3 in this case?

---

The solution would be to use an image instead of the background for the link, with overflow: hidden:

.button{
    margin: 45px 0;
    width: 222px;
    height: 40px;
    display: block;
    border: 1px solid #ebebeb;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden !important;
}

.button img {
    width: 222px;
    height: 40px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff799), to(#fdc689));
    background: -webkit-linear-gradient(top, #fff799, #fdc689);
    background: -moz-linear-gradient(top, #fff799, #fdc689);
    background: -o-linear-gradient(top, #fff799, #fdc689);
    background: -ms-linear-gradient(top, #fff799, #fdc689);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff799', EndColorStr='#fdc689');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff799', EndColorStr='#fdc689', GradientType=0)";
}