Rounded Border + Filter Transform Gradient

Run in IE 8 - 9 and notice that the gradient does not bleed outside border

by Alex Yu

HTML

<div id="mask"><button id="test">Testing!</button></div>

CSS

#mask
{
    overflow: hidden;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    width: 220px;
}

#test
{
    font-family: sans-serif;
    padding:10px;
    background: grey;
    width: 220px;



    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#B7F34B', endColorstr='#568505');/*For IE7-8-9*/    
    background-image: none, linear-gradient(to bottom, #b7f34b 0%, #5e9106 100%);

}