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.