Gradients and rounded corners in Internet Explorer

I ran into a problem today when I tried to build a new CSS tab-functionality. Gradients and rounded corners don’t go very well together in Internet Explorer, and the result of this is displayed in the following screenshot:

This screenshot is from Internet Explorer 9. As you can see, while the corners to the right works just fine, the corners to the left looks a bit “wierd”. The problem appears when you combine gradients and rounded corners in CSS3.

I searched for the solution, and I found that there were several options – I use this blog to document the different approaches:

Wrap the HTML into another div

One solution would be to wrap the current div into another. Just like this:

<div class="corners">
 <div class="gradients">my content</div>
</div>

And then adding the border-radius to the corners-class and the gradients-code to the gradients-class. Just like this:

.corners {
 border-radius: 5px;
 overflow: hidden;
}

.gradients {
 background: linear-gradient(to bottom,  #F15931 0%,#D4340A 100%);
}

This works fine in IE9 – but it doesn’t work in IE7 or IE8.

Use CSS3pie

Another solution would be to use an extension found at http://css3pie.com/. This open source project tries to add CSS3-functionality to Internet Explorer 6 – 9 by injecting code into your CSS. You can read more about how to implement this functionality in the documentation found here: http://css3pie.com/documentation/

However, after some experimentation I decided not to use this approach. The main reason for this is performance. It seems that when you inject code like this into your CSS, the performance of your website degrades – and the more you use this fix, the worse it gets.

Use SVG background-image

Finally, I ended up using a bit of a hack. You can view a much more elaborate description of this hack here: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

In the article Michael Barrett explains how to make use of IE9’s support for SVG background-image, and implement a minor hack by applying a filter and then remove that filter again afterwards.

There’s no need to go into much detail about how this works. Instead, I found out that the amazing tool called “Ultimate CSS Gradient Generator” has support for this approach. You can find this tool here: http://www.colorzilla.com/gradient-editor/

The tool will generate cross-browser valid CSS-code like this:

background: #f15931; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNTkzMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNDM0MGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f15931 0%, #d4340a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f15931), color-stop(100%,#d4340a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f15931 0%,#d4340a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f15931 0%,#d4340a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f15931 0%,#d4340a 100%); /* IE10+ */
background: linear-gradient(to bottom, #f15931 0%,#d4340a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f15931', endColorstr='#d4340a',GradientType=0 ); /* IE6-8 */

This CSS will not be enough in itself. You need to add the following to the HTML – after you include the CSS:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

This approach will enable you to use gradients and rounded corners in Internet Explorer 9, while enabling gradients (but not rounded corners) in Internet Explorer 7 and 8. I like this approach because it doesn’t affect performance, and I’m able to obtain an acceptable result. I know that this doesn’t work fully in Internet Explorer 7 and 8 – but the usage of these two browsers are 2 % and 7 % and declining. People using these browsers will have to live with squares.

And finally – the result:

About these ads

3 thoughts on “Gradients and rounded corners in Internet Explorer

  1. Another option would be to accept the limitations of some browsers and drop the fancy styling of content when they visit your site. Using hacks like IE filters is a sin. And those who are browsing the interwebs with an ancient browser probably don’t give a shit about how things look anyway ;)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s