Question

I am working on creating a theme and need to know how to make a rounded box around each individual widget. I want to change each color. I need it rounded also and dynamic. I need if i add more things it will stretch or auto adjust the height. I have tried over and over but unable to find a good way. Here is my test board

http://wpcreations.net/wptest/

I have right now a box. I need it to be rounded off and this has to be cross browser compatible. Thank you in advance.

I

Answer 1

You can accomplish the rounded corners on each widget via border-radius.

In your theme’s style sheet, add:

.widget { 
   border-radius:10px; 
   -moz-border-radius:10px; 
   -webkit-border-radius:10px; 
}

For the different background colors, you’ll have to target each widget individually and specify a color for them in your style sheet.

And to make IE6-8 behave with rounded corners, you could use “Curved Corners“. It won’t necessarily validate, but it’ll get the look you want.

IE9 already supports border-radius, but you have to specify your meta tag properly:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

//EDIT

To use Curved Corners, first download the most updated version here.
Then all you should have to do is upload the border-radius.htc file to your server where you can get to it; generally in the css folder of your theme.
After that, wherever you want to have a border radius you add behavior: url(border-radius.htc) to the css.

Our example, with Curved Corners’ border-radius.htc added:

.widget { 
   border-radius:10px; 
   -moz-border-radius:10px; 
   -webkit-border-radius:10px;
   behavior: url(http://path.to.file/border-radius.htc); 
}

Hope that helps.