IE9 Rounded Corners & CSS Background Gradients Living Together?

Question

In IE9, I discovered a strange thing trying to display a background gradient.

I mainly apply several classes to the container.

<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 filter garbage to my .gradient class.

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

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

So, I tried to insert a conditional expression to declare a filter.

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

This returns my angles, but the gradient goes away.

Answer 1

The gradient will come out for rounded corners in IE9, so the best solution now is to add one additional 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 recommend this Photoshop-like tool for creating cross-browser gradients: http://www.colorzilla.com/gradient-editor/

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

Answer 2

you do not need if IE block.

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

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 hasLayout element (see http://reference.sitepoint.com/css/haslayout )

Answer 3

This is a rather complicated solution to the problem with IE9 gradients and angles. It uses js to generate SVG on the fly - and it's fast.

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

Answer 4

rounded corners and filter do not go together. for IE, I always enable http://css3pie.com and use it to make the radius and border gradient in IE. The css sample is as follows:

 .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%); } svg + xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjYjJkMSIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iIzQwODBiMyIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4 =); .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%); } 

Stages:

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

Answer 5

Just use the div wrapper (rounded and overflowed) to copy the radius for IE9. Simple, cross-browser works. SVG or JS are not needed.

 <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 */ }