Creating rounded corners in pure CSS is pretty simple and straight forward. The following lines of code demonstrate it.
-moz-border-radius:10px; / Firefox / -webkit-border-radius:10px; / Safari and chrome / -khtml-border-radius:10px; / Linux browsers / border-radius:10px; / CSS3 /
If we write the above CSS for any element (say a div), it works fine for every browser, EXCEPT Internet Explorer. Internet Explorer doesn’t follow the CSS3 Rule properly for rounded corners . Even the latest version IE 8 doesn’t follow it.
However, there is a work around to get rounded corners in IE too. We need a JavaScript file to get our work done in another way. For that we need to first download the file “border-radius.htc” from http://code.google.com/p/curved-corner/
“border-radius.htc” is a JavaScript file with extension htc(Html Component) and contains the script to take elements from the document and manually round it. Browsers other than IE won’t require this file.
The updatedCSS would look like :
-moz-border-radius:10px; / Firefox / -webkit-border-radius:10px; / Safari and chrome / -khtml-border-radius:10px; / Linux browsers / border-radius:10px; / CSS3 / behavior: url(border-radius.htc); //Include the js file
Problem : When we used the above CSS with simple html page, it worked fine . But when we did the same, for Asp.net WebForms which inherits from MasterPage, it did not work. We knew that, there were some problems with z-index, as there was no error and div was not displaying at all.
Solution : In the page, pick the parent div/element of the div whose corner needs to be round. Write the CSS for the parent div as follows:
z-index : 0;
position: relative;
And it worked automagically