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