How can I get multiple borders with rounded corners? CSS

Question

Any idea on how I can get round corners work with multiple borders? The box will be dynamic, depending what will be inputed into the box, so I can\'t add static width or hei

Answer 1

I suggest using the excellent jQuery round corner plugin.

http://jquery.malsup.com/corner/

It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.

Here's How to use it

You need to include the jQuery and the Corner js script before . Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();

Check working example at http://jsfiddle.net/VLPpk/1