IE9 Rounded Corners & CSS Background Gradients Living Together?

Question

I came across a weird thing in IE9 trying to get a background gradient to display.

Basically I'm applying multiple classes to a container object.

<div class="gradient corners"></div>

Using this CSS.

.gradient {
background-color: #96A7C5;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, #6C86AD),
color-stop(0.6, #96A7C5)
);
background-image: -moz-linear-gradient(
center bottom,
#75A33A 19%,
#8DC447 60%
);

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

To get the gradient in IE, I apply the filter garbage to my .gradient class.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');

With that, the gradient works but my rounded corners go away.

So I tried putting in a conditional for the filter declaration.

<!--[if IE]>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');
<![endif]-->

That brings back my corners but the gradient goes away.

Take a look at this SO question: http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding — scurker, May 25 '11 at 20:10

score 25 · Accepted Answer · answered Sep 25 '11 at 07:36

Gradient will go out for rounded corners in IE9, so the best solution for now to add one extra div:

 <div class="corners"><div class="gradient"></div></div>

and hide overflow for .corners

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

overflow: hidden;
}

I recomend this Photoshop-like tool for creating cross-browser gradients: http://www.colorzilla.com/gradient-editor/

And this one to create border-radius: http://border-radius.com/

score 2 · Answer 2 · answered Jul 17 '12 at 14:55

2

This is a pretty solid workaround for the IE9 gradients vs corners issue. It uses js to generate an SVG on the fly - and it's fast.

http://abouthalf.com/2011/10/04/updated-ie9-gradients-with-rounded-corners/

answered Jul 17 '12 at 14:55

SFlagg

379
5
10

while svg support is widespread, you will rely on js for styling - it might matter if non-js version is important to the project – Luca Oct 11 '12 at 17:58

score 2 · Answer 3 · answered May 25 '11 at 20:13

you don't need the if IE block.

just put all 3(4 if you include both IEs) rules in the style declaration, the browsers will only pick up the ones that they understand.

an example:

.gradient {
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1,#81a8cb)); /* Safari & Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

It should also be noted that gradients in IE will only work if the element hasLayout (See: http://reference.sitepoint.com/css/haslayout)

Technically, it's five. Webkit changed their gradient code to be more in line with the new W3C recommendation draft. — Shauna, May 26 '11 at 18:49

score 1 · Answer 4 · answered Jul 05 '12 at 14:04

rounded corners and filter don't go together. for IE i always include http://css3pie.com and use it to do border-radius and gradients in IE. a sample css looks like this:

.someElement {
    behavior: url(assets/js/PIE.htc);
    border-radius: 10px;
    background: #8cb2d1;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjYjJkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iIzQwODBiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  #8cb2d1 0%, #4080b3 42%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8cb2d1), color-stop(42%,#4080b3));
    background: -webkit-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: -o-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: -ms-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    -pie-background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%);
}

The steps:

include PIE.htc via behavior
add border radius as usual (border-radius: 10px;)
add the special -pie-background attribute: (-pie-background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%);)

he was talking about IE9, which supports rounded corners out of the box, and yeah, they can be used in conjunction with gradient filters (I'm doing it now), although with some caveats. As @Pavot said, the background gradient will go out of the box. If you have defined some border and enough border-radius, you'll notice the rounded corners are still there (I know this is an old question; I just deleted this as a reply -which I wrote two years ago- and put it as a comment). — Pere, Nov 04 '14 at 12:02

score 1 · Answer 5 · answered Feb 12 '13 at 18:42

Just use a wrapper div (rounded & overflow hidden) to clip the radius for IE9. Simple, works cross-browser. SVG or JS are unnecessary.

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}

IE9 Rounded Corners & CSS Background Gradients Living Together?

5 Answers5

Linked