CSS rounded corners on all browsers (old and modern)
Rounded corners add wow factor on website's look and feel. But they don't work across all browsers. It gives you a lot of headache when you have to make it work across all browsers. Today I had to add rounded corners to menu. Most of the css tricks mentioned that to make it work on older IE versions you need to have rounded corners on all four corners.
I had to make rounded corner only on top two corners. So, all the tips and tricks from all blogs didn't work for me.
I used CSS rounded corners for all latest browsers like this:
#nav li {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}and the result was:
But in IE less than version 9 this is what I got:
I tried with border-radius.htc from: http://code.google.com/p/curved-corner/downloads/list
like this:[Note: relative to page not css]
#nav li {
behavior: url(/border-radius.htc);
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}That works if all four corners are rounded. So, doesn't work in my case. So, i had to use images for IE6, IE7 and IE8. This is how I generated perfect rounded corners.
go to: generateit.net/rounded-corner/ and add foreground and border Color, leave background as white.
this is what it generated for me.
I saved two rounded corner images for each color and created sprite image to combine all in one image, so we have just one http request on page load making page load faster.
go to one of the sprite generator website e.g. http://spritegen.website-performance.org/
upload your image pieces and it will create one sprite image and generates css for you based on your image pieces.
My Sprite Image: http://www.diigo.com/item/image/80d3/1y2d (it was thin and tall image so hubpages didn't allow me to upload here)
And, my css for less than IE9
<!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="http://techooze.com/skin/frontend/tekno/default/css/styles-ie.css" media="all" /> <![endif]-->
which contain this css:
#nav li.bg-blue {
background: url("../images/rounded-corners.png") no-repeat scroll 0 0 #33BDBF;
}
#nav li.bg-blue a.top-level-a{
background: url("../images/rounded-corners.png") no-repeat scroll right -60px transparent;
}
#nav li.bg-red {
background: url("../images/rounded-corners.png") no-repeat scroll 0 -120px #EC0053;
}
#nav li.bg-red a.top-level-a{
background: url("../images/rounded-corners.png") no-repeat scroll right -180px transparent;
}
#nav li.bg-yellow {
background: url("../images/rounded-corners.png") no-repeat scroll 0 -240px #FFEB94;
}
#nav li.bg-yellow a.top-level-a{
background: url("../images/rounded-corners.png") no-repeat scroll right -300px transparent;
}and, the final result of menu with rounded corner in IE6, IE7 and IE8 look like this:
Our client gets a lot of visitors on their e-commerce website from older Internet explorer browsers, so we had to fix menu on them as well. May be we should charge shoppers extra internet explorer tax for using older browsers same as kogans did. :-)