3 Simple Ways to Create CSS Rounded Corners
Ads
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.
Share!
Enjoy the article so far? Recommend it to your friends and peers.
Subscribe! (free)
Be the first to our articles and get latest updates on freebies.
Advertisement
