Rounded Corners With Rico

I’ve seen and tried a ton of HTML/CSS/JavaScript tricks and hacks to get rounded corners on DIV elements. So far I have found that the easiest way to get rounded corners on divs is by using the Rico JavaScript framework. To demonstrate this in code let me define a snippet of HTML:

<DIV id="mydiv" style="background-color: #FFE6BF">
  some text
</DIV>

To make the DIV element have rounded corners just execute the following bit of JavaScript, perhaps in the document.onload event method:

Rico.Corner.round('mydiv');

You can also pass in some additional options to Rico’s round function which indicates which corner(s) to round. Here is another example which rounds only the top-right and bottom-left corners:

Rico.Corner.round('mydiv', {corners:'tr bl'});

And of course, br and tl also work.

As a convenience, you can round the corners of multiple elements at once. To round all DIV elements that use a given class use the following JavaScript:

new Rico.Effect.Round('div', 'roundCssClass');

With the above JavaScript, only those DIV element that use the CSS class roundCssClass will be rounded off.