www.mapelli.info
Blogging tips & www social trends
Don’t be too Square… Round Some Corners!
30 Jul
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! 
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
- h : height (px, default
- 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
- http://www.roundedcornr.com/
- http://wigflip.com/cornershop/
- http://www.fritscher.ch/dojo/roundedcorners.html
- http://www.neuroticweb.com/recursos/css-rounded-box/index.php
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 
Subscribe NOW!
Categories
Top Commentators
- Pass Drug Test (5)
- Mirific (4)
- BigMuzz (3)
- luz (3)
- Cataloguizer (3)
7 Responses for "Don’t be too Square… Round Some Corners!"
I tried Nify Corners for a while. It is all very nice until you have some problem … then goes the hell !
Now I generally prefer corners made with bitmaps, either dinamically or statically generated.
Yes, that’s the problem with javascript libraries… you have to relay on them and hope that nothing goes wrong
What happened to you? rounded corners placed randomly?
I tried Nifty Corners for a few days some months ago, and I had no problems with it.. but I still feel unconfortable with javascript taking care of the appearance of my pages…
.. my problem was: no rounded corners at all !!
But it wasn’t the first time I was using these scripts, I just changed something in the new pages (maybe the order of some HTML sections, who knows..) but never had enough time to debug or analyze the issue.
That’s why I abandoned the use of javascripts to display rounded corners: I don’t have enough time to debug such a trivial ‘feature’, it is better to use scripts for something more useful …
… like AJAX-style animations
To add a smoother look to your site and since the topic is about rounded corners, then CSS does it all. If you handle CSS pretty well, you don’t even need images to make rounded corners and/or shapes. But in any way, CSS has advanced dramatically nowadays. I don’t use scripts and such to make my ‘easy’ part from the work.
Here’s a link to a nice tutorial well explained on how to do that: http://kalsey.com/2003/07/rounded_corners_in_css/
I hope I’m allowed to add that link, if not, please censor it Francesco. As you can see, that’s a tutorial made back in 2003, think of the possibilities you have now.
And Yes, I DO believe rounded corners and a more modern look of your website is very important
I gotta kind of agree but thn I just have to go with the horrible old phrase that content is king.
No matter how ya corners look, if the content sucks you may as well be web -2.0
The javascript corners look great! I will try them on my site.
Many users have no adapted to modern preferences. They are now ‘expecting’ good looking sites, not just the content. Sure, whenever you’re just doing researches, you’re just interested in the content, but in most cases, a good comfy design is always very pleasing to the user.
Rounded corners all the way..
Leave a reply
Comments and trackbacks are dofollowed. Be sure to read my comment policy once in a lifetime before posting