Gradient + Rounded Corner CSS Issue in IE9

Question

In my current project, I've used CSS3 gradient in my CSS file. To support IE browser, I've used filter property as well. Following is my code:

.card.active .content.back {
  background: #333; /* Old browsers */
  background: -moz-linear-gradient(top, #333 0%, #0e0e0e 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #333 0%,#0e0e0e 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */

}

But when I use the filter property in the above code, the border-radius property is not working. If anyone know a fix for this, please share it with me.

Thanks

Answer 1

You can use PIE.htc for your desired results.

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.

PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

In addition, PIE adds support for border-image and linear-gradient to IE 9, which already supports the other features natively.

http://css3pie.com/

or see the demo:- http://jsfiddle.net/ZxzSs/1/

for support PIE.htc you have to keep the PIE.htc file on your root folder than will work for your website....

Answer 2

You should be able to apply the gradient to a child of the element with the rounded corners. I don't have access to IE9 on my home machine but this should work:

.element {
    background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
    border-radius: 10px;
}
.element .ie-helper {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 );
}

HTML:

<div class="element">
    <!--[if lt IE 9]><div class="ie-helper"><![endif]-->
    <p>Your content with gradient and rounded corners...</p>
    <!--[if lt IE 9]></div><![endif]-->
</div>

If the page is viewed in IE10+ or other browsers, both the gradient and rounded corners will apply to same element (assuming you bring back the vendor-specific prefixes from your code sample). The inner div.ie-helper will only render on IE9 and below because of the conditional comments used.

This isn't ideal but would get the job done, but since you're after such a wide range of browsers to be fully supported this is a reasonable workaround