Rounded Corners With Rico

Posted August 10, 2006.

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:

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

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:

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:

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

Technorati Tags: , , , ,

Scriptaculous Rails »
« RubyConf 2006 & Carson Summit
 
Related Posts
Recent Posts
 

1 Comment so far

  1. jbschwi on April 21st, 2008

    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

Leave a reply