Ken’s Sandbox

One of the eye candy functions of the Rico library is the ability to round the corners of a div element. Though I do not actually use this in my projects, over the past few days I have responded to posts on the Rico forum asking for help with this function. Though I’m no expert, I have learned a little about the workings of Rico rounding and with all of the requests for any documentation, figured my comments are better than nothing. So here goes.

To round the corners of a div, use the following javascript function (you will need to include the prototype and rico libraries in your page but I’ll skip over the obvious):

Rico.Corner.round(’yourDivId’[, myOptions]);

You will need to include this in a script tag after the div in your page or add it to the page’s onLoad function. In the above myOptions is a Rico options object containing optional parameters to control which corners are to be rounded, forground, background and border colors etc. The options object looks like this (values are the defaults):

var myOptions = {
corners : ‘all’,
color : ‘fromElement’,
bgColor : ‘fromParent’,
blend : true,
border : false,
compact : false
}

Note: when I pass the myOptions above as the second parameter, IE complains (Firefox likes it fine). I don’t seem to have this problem when passing options in-line.
corners - specifies which corners are to be rounded. The default is all. top and bottom specify only the top or bottom corners, tl, tr, bl, br specify individual corenrs to round.

color - is the color of the div we are working on. The keyword fromElement is the default and will take the color from the element’s style.

bgColor - is the background color to use. The keyword fromParent is the default and will take the color from the element’s parent style.

blend - is true or false. If true Rico will attempt to smoth the rounded corners by blending colors.

border - If you want a border on your element you should not include a border in the element’s style and instead, place a border color in the options border parameter.

compact - true or false. True causes a small radius border, false is a larger radius border.

Styling your Divs

I have seen several posts where people have attempted to add size styles to their divs. Adding a width does not seem to cause a problem. However, if you try to set a height of the the div you will find your bottom corners showing at a poind just below the div’s content. The trick to forcing a size is to nest an inner div in the one you are rounding and setting the size on your inner div.

I have posted a very simple sample page showing a couple of rounded divs here. Hope this helps get you started. I watch the Rico forums so please post your questions there where people a lot smarter than I have a chance to help you. However, corrections and comments are always welcome.

Please post any comments or questions about this post on the Rico support forum (forum.openrico.org).