Border Radius = Background Bleed

Question

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 probl

Answer 1

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)";
}

Answer 2

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?