3 Simple Ways to Create CSS Rounded Corners

The use of rounded corners on website has becoming very popular. Many websites are starting to kill the sharp edge and go with rounded corners in their buttons, navigation bar, header, banner, etc. Just how easy these rounded corners images can be created?

Here are three really easy ways to do it. Full list after jump.

1. Google Rounded Corners Generator

This google script generates a PNG format rounded corners for you on the fly. Simply copy the scripts below into a browser and hit enter.

http://groups-beta.google.com/groups/roundedcorners? c=999999&bc=white&w=4&h=4&a=tr

Tweak the following parameters to get the rounded corners of your choice.
Parameters:

c	the color, as either a name or a CSS-style color spec (RGB or RRGGBB) sans #. Color names that seem to work: black white gray red green blue yellow teal olive purple. Can you find more?
bc	the background color, same acceptable input as c
h	height in pixels
w	width in pixels
a	which corner to generate; tl is top left, tr is top right, bl is bottom left, br is bottom

2. Spiffy Corners

Spiffy Corners creates you rounded corner without using images. It make use of CSS and HTML to create a rounded corner effect that works well in both Internet Explorer and Firefox. Visit Spiffy and generate your codes.

3. Cornershop

Cornershop is rather a combination of both. You fill up your requirements in the textfield, and your desired corners (in images) will be generated, together with CSS and HTML.