Recently I wrote an article on CSS3: Rounded CSS Corners, which is a great solution for creating rounded corners. However, Internet Explorer doesn’t yet support it, but there is a solution which this article explains.
The following two links demonstrate a working version and also a zip file so you can download everything you need to get this working.
The HTML is pretty straight forward and uses the code from another article – HTML5 tutorial: Getting Started.
In order to get the rounded corners working in IE you’ll need JQuery and the JQuery corner scriptboth of which are included in the above zip file which I’ve then referenced from the HTML.
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.corner.js"></script>
Next you’ll simply need to tell the browser which corners you want to be rounded.
<script>
$("#container").corner();
$("section").corner();
$("aside").corner();
$("#main-navigation a").corner("top 5px");
</script>
If you’re familiar with CSS at all then you should be able to easily see how this is applied using JavaScript as we’re simply using the element, ID or class within the quotes to target that part of the HTML.
Summary
And that’s all there is to it. You can create all kinds of rounded corner effects as shown on the rounded corners demo site. Up until now, I’ve always created rounded corners using this methodbut seeing the simplicity of this Jquery solution, I am tempted to switch for Internet Explorer at least and rely on CSS3 for Webkit and Mozilla browsers.
http://www.dave-woods.co.uk/index.php/rounded-corners-in-internet-explorer/
http://www.malsup.com/jquery/corner/
Another one: http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
