[slappy]

Here are some articles about making rounded corners:

Nifty Cube

http://www.html.it/articoli/niftycube/index.html

CSS Design: Creating Custom Corners & Borders Part II

http://www.alistapart.com/articles/customcorners2

Bullet-Proof Rounded Corners

http://www.albin.net/CSS/roundedCorners/

There's also one named:

Rounded corners without images A Nifty Corners Inspiration

which I have saved and downloaded on my computer, but is producing a 404 on the net at the moment. It uses a javascript which is downloadable here:

http://seky.nahory.net/soubory/0504-...ded-corners.js

The instructions provided are:

Instructions for use
Link the JavaScript rounded-corners.js to the page (by adding the <script src="rounded-corners.js"></script> to the header of your page).
Add the rounded class to all elements, that should have the rounded corners. You can set up some parameters of the corners by adding another classes as well, see bellow.
On the very bottom of the page call the JavaScript function make_corners(). (It's better than calling it by the onload event of the page, because it waits till all the pictures are loaded.)
See a simple example of rounded corners.

Setting up the parameters of corners
For each element with the rounded class you can set additional parameters through another classes. The layout can be set up through CSS as well, using the classes rounded (the element with rounded corners), rc-container-top and rc-container-bottom (containers for the rounding strips), rc-inner a rc-level-NN (rounding strips; NN is i number in range 0 up to corner radius).

Names of the parameters classes should have name in the form rc-[property_name]-[property_value]. Use 1 / 0 values for booleans (you can omit the 1 value). All the parameters have a corresponding JavaScript variable with the name $rc_[property_name], in the rounded_corners() function. The next table shows an overview of all the parameters.

CSS Class name JS variable Description
rc-radius-[integer] $rc_radius Sets the radius of corners.
rc-top-[0|1] $rc_top Switches rounding of upper corners.
rc-bottom-[0|1] $rc_bottom Switches rounding of lower corners.
rc-right-[0|1] $rc_right Switches rounding of right corners.
rc-left-[0|1] $rc_left Switches rounding of left corners.
rc-selfcolor-[RRGGBB] $rc_self_color Sets color of the rounded element.
rc-parentcolor-[RRGGBB] $rc_parent_color Sets the background color (color of the parent element).
rc-inheritstylecolors-[0|1] When enabled, the script sets no color, which means that CSS defined colors are used.
rc-antialiased-[0|1] $rc_antialiased Adds border to the strips which makes the corners look a bit anti-aliased. (But it's no real anti-aliasing.)
Works with rc-method-margin only.
Warning: doesn't work with MSIE when colors are set like white or #FFF and not #FFFFFF or rgb(255,255,255). (Execution crashes in such case and no rounding is produced.)
rc-antialiasedcf-[0-1] $rc_antialiased_cf Anti-aliasing ratio. The closer to 1, the closer is the color of anti-aliasing border to the background color.
rc-compact-[0|1] $rc_compact Sets negative margins to the containers, so that the rounded element doesn't get bigger.
Sometimes buggy in MSIE.
rc-automargin-[0|1] $rc_auto_margin Sets negative margin to compensate padding of the rounded element.
Does not work in MSIE.
rc-method-[margin|border] $rc_method Sets the method of drawing rounded corners.
rc-border $rc_border Creates rounded borders. For instructions about how to use it see example of rounded borders.

The rc-method property is of importance, as it determines the method of drawing rounded corners:

margin
Draws the container with the same background color, as the parent element. The strips have the color of rounded element and variable margin margin. You can use the ?anti-aliasing? in this case.
border
Background of the container and strips remains transparent, but the strips have variable with borders of the same color, as the parent element. This method is useful, when you have an image as background of the rounded element.
See an example of using parameters of rounded corners.

How does it work?
First the script finds all the elements that should be rounded (using the find_class() function) Then it checks the rounded corners parameters. When a property is not found, it uses the default value (see the first line of rounded_corners()function). Then it inserts the rounding container and strips. Their color is determined by the function get_current_style(), which unfortunately doesn't work in KHTML browsers (like Safari and Konqueror) and older versions of Opera (prior to 7.5) as these browser don't support the getComputedStyle() method of defaultView object. However, for these browser you can use the ?manual setting? of colors or just leave the corners square till they start to support it. (The time should come, as this is a part of DOM standard.)

All comments, improvements, suggestions etc. are welcome. You can use all the code, ideas etc. any way you want. Enjoy.

Regards,