A Solution To Rounded Corner Issue In IE

Recently there was a requirement in my project where i have to make all the buttons and divs rounded corner.
To do this task i found a nice solution in css3 i.e using ‘border-radius‘ we can do the task.
A nice Tip also added by Sachin, describing how to make rounded corner divs using ‘border-radius‘.

But unfortunately ‘border-radius‘ is not going to work in IE.
So many articles(including Sachin’s) have suggested to use ‘behavior: url(border-radius.htc)’, but in my case this is also not working.

Thus i searched again and found a useful solution, which is certainly working for me.

Include a js file named as ‘curvycorners.js‘.
This javascript file will work for those browsers(IE) which are not supporting ‘border-radius‘ and will automatically make the divs rounded corner.

Here is the css class which i have used for making a rounded corner div

.corner-all {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

But to make it working in IE, i have just included the 'curvycorners.js' in the view file
<script type="text/javascript" src="curvycorners.js">

This also works
<script type="text/javascript" src="curvycorners.src.js">

You can find and download the js file Here

SANDEEP PRADHAN, Sr. Developer, Mindfire Solutions.

Related Tags: border-radius, CSS, ie, round corne

Author : SANDEEP PRADHAN

A Solution To Rounded Corner Issue In IE

Leave a Reply

Subscribe With Us