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.

Related posts:

  1. Rounded Corners with CSS border-radius Property
  2. Div Align With CSS
  3. Add Shadows with CSS box-shadow Property
  4. Unobtrusive JavaScript with Prototype and Behavior
  5. HTML FieldSet Tag
  6. TechKnow Year In Review 2006


2 Responses to “Rounded Corners With Rico”

  • jbschwi Says:

    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

  • Rounded Corners with CSS Border Radius Says:

    […] one the coolest things you could do to a web page. Unfortunately, in 2006 the easiest way to have rounded corners in a HTML tag such as a div was to use JavaScript and images and all other sorts of hacks. […]

Leave a Reply