Rounded Corners are a must-have if you want to give your blog a nice Web 2.0 Look and Feel.
Here are some tips to add rounded corners nearly everywere without pain.

1.Rounded Corners with CSS

There is a draft for CSS3 that supports rounded corners, and firefox has a property that somehow mimic the behavior of the proposed draft (there are some difference though…).
This means that it is possible to add a rounded corner effect to your divs by writing something like

<div style=”border: 3px solid #cccccc; padding: 5px; -moz-border-radius: 10px; ” >

Sorry IE users, you’ll see the boring square corners. Maybe it’s time to try Firefox?;)

2.Rounded Corners in AdSense Units

Yes, it’s possible. And if you don’t want to be punished by the God of Web 2.0 you really have to use them instead of the crappy square corners.

Here is an example with a real adsense unit (sorry, to see this you have to visit the article webpage if you’re reading via rss feed…) :

They look cool, don’t you think?

To add rounded corners, you have to log in to your adsense account and create a new ad unit. After the color selection you’ll find a nice drop down list called “corner styles”.

If you’re wandering why you never noticed this cool feature, it’s because it has been released recently. :)

3.Rounded Corners from Google

If you want to create an image or something with rounded corners you can have google draw the corners for you! :D

Just use as image src something like your browser to something like: groups-beta.google.com/groups/roundedcorners? c=999900&bc=ccc&w=34&h=34&a=tr , changing the parameters as follow:

  • c : corners color (in hex or plain text form, e.g. ‘red’ or ‘ffccdd’ or ‘fca’)
  • bc : background color (same as c, can be omitted for transparent bg)
  • w : width (px, default 8)
  • h : height (px, default 8)
  • a : one of tr (top right) , tl (top left) , bl (bottom left) , br (bottom right)

This is the resulting image:

(thanks to google blogoscoped)

4.Rounded Corners with javascript

There are a lot of javascripts tools that can help you to round the corners of your divs, but I found Nifty Corner really simple to use. :)

You just have to load the .js file and place some calls defining with elements in the page should be rounded. If you don’t bother depending on javascript, this can be a simple solution.

5. Rounded Corners Online Generators

Obviouly there are online rounded corner generators.

They generate images and/or html and css files to be copied and used on your website… You still have to upload images on your server and tweak some code, but it’s better than doing everything on your own :)

If you have some other rounded corners resources, tips or advices, please share them with me and the other readers! I’m waiting for your comments ;)