A while ago I wrote an article on how to implement CSS3 and Cross browser rounded corner CSS. That article (http://www.mccran.co.uk/index.cfm/2010/7/8/CSS-3-Rounded-Corners-Example) mentions that the CSS3 code has not been adopted as a standard by some browsers (IE - I'm looking at you) but that there are some work around's to it, most of which involve re writing DOM elements using JavaScript.

This article deals with a JQuery plugin that can emulate a totally cross browser CSS3 rounded corners solution.

There is an example of the finished code here: JQuery Rounded Corners example

First thing is to call the JQuery library, and the download the corner.js file. You can get it here: http://www.malsup.com/jquery/corner/. That site is also where I got most of the examples and source for my example above, its shows the huge variety of display options the plugin has.

The really good thing about this plugin is that it tries to apply the standard CSS3 rounded corner code first, so any browser that natively supports CSS3 will use that.

Create any div's you want to be rounded. Below I'm creating three div's each with different class names to be used when applying border effects.

Next create your JQuery function that applies the plugin to your selected classes. Below I am using the JQuery wrap() function to auto write a wrapper div around any '.rounded' div. This creates the thin line edge.

The last two lines are more standard, they simply create top and bottom rounded corners respectively.

In my example above I wanted a solid differently coloured border around the div, so we are wrapping our content div in another div, and altering its border to being rounded as well.

There is an example of the finished code here: JQuery Rounded Corners example