Well there are couple of options when it comes to round corners.
Images
The old fashion way is using images. Some say that the other ways (JS for example) aren’t nearly as good: No anti-aliasing and senseless markup.
jQuery
All those JS fans would say go with jQuery, CSS support is minimal, images are too fiddly, to be able to select the elements you want to have round corners in jQuery makes perfect sense to even though some will no doubt argue otherwise. However, Javascript definitely has the highest scope for failure, and flickering in my experience. Here are couple of plugins you might consider using.
http://www.methvin.com/jquery/jq-corner-demo.html
http://plugins.jquery.com/project/jquery-roundcorners-canvas
CSS 3 and border-radius
With support for CSS3 being implemented in newer versions of Firefox, Safari and Chrome, it will also be helpful to look at “Border Radius”. But how about IE and Opera. You can always follow the “twitter way” handling this issue and my fave, downgrade the rounded corner feature to pointed corners on their website to IE users. Not a big deal really. Right?
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
Like any other CSS shorthand, the above can also be written in expanded format, and thus achieve different Border Radius for the topleft, topright, etc.
-moz-border-radius-topleft: 10px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 3px; -webkit-border-top-rightright-radius: 10px; -webkit-border-top-left-radius: 7px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-rightright-radius: 3px;
Here couple more links if you’d like to see more examples and solutions:


