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 easist 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 convinience, 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.
Technorati Tags: rico, javascript, html, framework, web2.0
Related posts:
One Comment
Just for everyone out there who has had a much problems as I have had trying to figure out how to use rico, here is a ‘Hello World’ for rounded corners using rico.
Rico Rounded Corners
function init() { Rico.Corner.round('roundedCorner', {corners:'all'}); } #roundedCorner{ position:absolute; top:10px; left:35px; width:250px; background:#a4a4a5; } #roundedContent{ height:100px; width:250px; padding:5px; }This is a sample of a div with rounded corners. The size is specified in an inner div. IE also requires the width to be specified in the outer div. Sorry about the formatting, if it is messy