2005.03.24 04:57 PM

Round Corners with CSS and JavaScript

The name of this simple but effective CSS/JavaScript library says it all: Nifty Corners.

No graphics - yeah!

Written by Alessandro Fulciniti and free for personal and commercial use. Very nice.

(via thejavascriptweblog)


Similar is this 'CSS Rounded Box Generator', very easy to use, although not as nifty as the 'Nifty Corners', since this Generator does use images, while the Nifty one isn't.


VOODOOS!L | 2005.03.29 02:36 AM

Loved this! Using the css version on my team's intranet wiki front page. Thanks!

Chris Lee | 2005.04.02 04:54 AM

VOODOOS!L - That is nice. You get to pick the colors and it generates the rounded corner graphics for you. Thanks!

Chris - You're welcome!

ewbi.develops | 2005.04.02 06:01 AM

Even niftier corners now available:


ewbi.develops | 2005.04.27 04:54 PM

Check out the RuzeeBorders at http://www.ruzee.com/blog/ruzeeborders which support corner-rounding, Mac OS X like shadows, and other neat effects without using images.

Steffen | 2006.05.04 09:49 AM

Thanks, Steffen - very nice. Lot of great comments there, too. Hope folks check it out.

In one of the comments I found a link to another corner-rounding JavaScript library inspired by Mr. Fulciniti's original Nifty Corners:


ewbi.develops | 2006.05.04 10:00 AM

And now there's Transcorners:


Also inspired by Nifty, but with some improvements:

# Transcorners always try to have the transcornered element size and original element size the same. That means, no (almost) jumping you will notice after stuff will be done. So if you will need to shift corners, you will need to set padding.

# Corners lay before content, so you can and you will have content on the "cornering area". What you will have to do is to add a child element with position...

# You can set any radius and any transition to have different effects.

# Transcorners are smart. They can guess any option if it is blank.

ewbi.develops | 2006.09.29 10:08 PM

There is a bug in your application. Do NOT enter anything and just click post. It will direct to another page. The page has very bad design. check it out yourself.

Umesh Kapadi | 2006.12.04 05:49 AM

Umesh Kapadi,

Sorry, my bad. My original comment misunderstood your intention. I stand by my contention that the TypePad CRAPTCHA stinks, and there's little I can do about it. However, you are correct that it is reporting an error (instead of showing a preview of the post). I have no idea why.

ewbi.develops | 2006.12.04 08:58 AM

Looks like Steffen Rusitschka has out done himself again, this time with RUZEE.ShadedBorder:


Very nice.

ewbi.develops | 2007.03.28 03:09 AM

Thanks for the info. Here is another round corner generator: http://www.roundz.net/

dora | 2008.09.24 08:28 AM


TrackBack URL:  https://www.typepad.com/services/trackback/6a00d8341c7bd453ef00d834398df253ef

Listed below are links to weblogs that reference Round Corners with CSS and JavaScript: