CODEWITHSUNDEEP
htmlcssinternet-explorer-9
codepuppy
codepuppy

Reputation: 1140

Implementing a gradient in internet explorer in conjunction with border radius

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.

Upvotes: 1

Views: 179

Answers (3)

Dennis
Dennis

Reputation: 32598

-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.

Upvotes: 3

Richard de Wit
Richard de Wit

Reputation: 7452

I advise to create an image of the background and let the image be the background, instead of making a CSS gradient. That way you will get the same background on every browser. You can even make the borders of the image rounded (and the corners transparent, save it as .png), that way the rounded corners are visible in < IE8

Make either:

  • an image of 1 or 2 pixels width, then repeat it horizontally,
  • or an image of the entire button (maybe having rounded corners)

Upvotes: 0

Stephan Muller
Stephan Muller

Reputation: 27600

The problem doesn't seem to be that it's a background gradient, but specifically that you use a filter to do so. The filter is a proprietary IE css property that will achieve the same, but it does not behave like a background.

Unfortunately, IE only supports gradients in IE10 and up (source), so you'll either have to use an image (works, but it's not as cool as CSS) or CSS3pie (sometimes tough to get working, but it does its job well!).

To see a working example, I used CSS3 pie on http://denkeensna.nl and it does the gradients + border radius just fine in IE, even IE7.

Upvotes: 1

Related Questions