Question

When I try to style a button in IE using a gradient and a border radius I find that effectively the corners get squared off because the gradient is applied to the background.

All other browsers appear to be able to handle this without an issue.

I have demostrated this here if you open this is in FireFox for example you will see rounded corners and the gradient contained within the border if you open this in Internet explorer you will not.

Obviously I have exaggerated the radius etc to make the effect clear. Using the following CSS:

.form_Wrapper{
    width: 250px;
    height: 250px;
    background-color: #32b1d2;
}

.form_Submit{
    /*positioning*/
    position: absolute;
    top: 100px;
    margin-left: 16px;
    margin-top:20px;
    padding: 3px 10px;
    width: 90px;height:40px;
    /*background*/
    background: #808080;
    background: -webkit-gradient(linear, left top, left bottom, from(#a5a5a5), to(#808080));
    background: -webkit-linear-gradient(top, #a5a5a5, #808080);
    background: -moz-linear-gradient(top, #a5a5a5, #808080);
    background: -ms-linear-gradient(#a5a5a5, #808080);
    background: -o-linear-gradient(#a5a5a5, #808080);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5a5a5', endColorstr='#808080');
    zoom: 1;
    /*border*/
    border: 2px solid #a5a5a5;
    border-color: #a2a2a2;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    /*text*/    
    opacity: 1.0;        
    color: #fff;
}
​

There must be some trick to applying the gradient to area inside the border rather than to the containing background. But I have been unable to research a solution to this.

Answer 1

-ms-linear-gradient won’t do anything as IE skips straight from the proprietary filter in IE9 to the standard linear-gradient in IE10.

The proprietary filter doesn’t behave precisely the same as the background, it just operates on the entire element without necessarily interacting with other CSS properties.

CSSPIE provides VML (similar to SVG) workarounds for lack of CSS support. Using it may degrade performance if you end up using it on lots of elements.

You can also use images, but maintenance gets messy. Want to change a color? You have to recreate the image. And the end user needs to re-download the image file every time it changes. It may be small, but it’s a noticeable flicker.

---

Takeaway: The simplest, cleanest, least hair-pulling-out solution is to provide a fallback solid color for non-CSS3 compliant browsers. If people want the “more beautiful web” MS talks about, they’ll use browsers that inherently support it rather than one that requires these hacks.