CSS: Rounded Corners with Gradients / Shadow for IE

Apr 09, 2012

Gradient Backgrounds with Rounded Corners

Internet Exploder's Gradient / Rounded Corner Problem

Most of you probably know that Internet Exploder (IE) can't handle too much CSS technology within one element. For example, adding a gradient and rounded corners gives you an unwanted effect:

View Me in Internet Exploder

Rounded Corners

CSS Rounded Corners are simple enough. In case you are unfamiliar with CSS methods to rounded corners, simply add this rounded-corners class to an html element:

.rounded-corners {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
-khtml-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
behavior:url(http://curved-corner.googlecode.com/files/border-radius.htc); /* For IE8 and Older */
}

As you can see, this produces rounded corners only.

Overflow: Hidden

Applying overflow:hidden will ensure that all sub-elements of the class are hidden outside of the element's boundaries. So, if we apply overflow:hidden, and then add a div sub-element with the gradient, we should be able to get the effect we are trying to achieve within internet exploder.

View this in IE: Gradients and Rounded Corners using CSS ONLY

.test-class-wrapper {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
-khtml-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
behavior:url(http://curved-corner.googlecode.com/files/border-radius.htc); /* For IE8 and Older */
overflow:hidden;
width:200px;
height:100px;
margin:0 auto;
text-align:center;
color:#fff;
border:1px solid #777;
}
.test-class {
background: rgb(117,174,67);
background: -moz-linear-gradient(top, rgba(117,174,67,1) 0%, rgba(60,98,28,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(117,174,67,1)), color-stop(100%,rgba(60,98,28,1)));
background: -webkit-linear-gradient(top, rgba(117,174,67,1) 0%,rgba(60,98,28,1) 100%);
background: -o-linear-gradient(top, rgba(117,174,67,1) 0%,rgba(60,98,28,1) 100%);
background: -ms-linear-gradient(top, rgba(117,174,67,1) 0%,rgba(60,98,28,1) 100%);
background: linear-gradient(top, rgba(117,174,67,1) 0%,rgba(60,98,28,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75ae43', endColorstr='#3c621c',GradientType=0 );
height:100%;
width:100%;
}

If you view this in internet explorer, you will see that it has perfect rounded corners with no 'overflow'. Simple enough, right?

Note: this might not work in old versions of IE.