Rounded Corners without Images: A Nifty Corners Inspiration

When I first saw Alessandro Fulciniti's Nifty corners page, I thought it's a little bit too complicated for me. Good luck I found it later again. It's a perfect idea.

What is it all about? It's a method of creating rounded corners of an element without using images, just with a piece of JavaScript and few drops of CSS. I like rounded corners, but the necessity to create for every diameter and every combination of foreground and background color 4 images for me as the designer and to download them for the user makes me use the square ones in most cases. The Nifty corners method offers different approach: instead of inserting the images of rounded corners it inserts a few pixels high container block of the same background color as the background of the parent element. This block contains strips 1–2 pixel height, that have the same background color as the element, that should have rounded corners. Margins of these strips changes from 0 up to radius of desired corners, which makes the outer element appear rounded. See the picture for explanation:

The point is adding the strips into the page via JavaScript. The Allesandro Fulciniti's script calls a function for each element, that should be rounded with foreground and background colors and ID of the element.

Well, this is a serious disadvantage of this method, at least for me, as I am a lazy web designer and the necessity to call the JavaScript for each element would in real life cause me not to use this function at all. The perfect way for me would be to add a class to each element, that should be rounded and leave the rest to JavaScript. And it would be nice to have possibility to set the radius of the rounded corners as well. Also could be useful if the script can determine the colors, so that I don't have to set them up manually.

So I got to work and after some time spent on fighting sin() and cos() functions I had it.

Instructions for use

1. Link the JavaScript rounded-corners.js to the page (by adding the <script src="rounded-corners.js"></script> to the header of your page).


2. 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.


3. 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.