Thursday, June 10, 2010

Rounded Corner and other stuff in IE7 or IE8

Often we need to have rounded corner support for our html content, filefox, crome, safari and latest version of IE9 have native support for rounded corner for html div and other supported html elements. But Alas! we don’t have support in IE6, IE7 or IE8.

An interesting website is http://border-radius.com/ where we can generate rounded border radius. just visit this site and add your desired pixel. It will generate the required css for you.

image 

It’s a copy and pest effort. Now if we need rounded corner in pre IE9 browsers we need some thing out of the box. Then come the custom css and JavaScript libraries and some time html “.htc” behaviors files.

In first option we are going to talk about css3pie it’s a simple yet powerful tool to get some html5 support in old ie browsers. You can download the libraries from its homepage at http://css3pie.com/image

Add what ever border you need and at last include behavior:url(/pie.htc) that’s it.

Next we are going to see an query based rounded corner support, http://jquery.malsup.com/corner/ this is the site where from you can download the library its s single file and required to have query in advance. the use is very easy. bellow an screen shot from original site is given.

image

Try it you would love it. I am sure lots of you are already using it. Good luck and happy programming.