composing the perfect CSS rounded box

[Master Kwesi Nkromah]

We all love 'em but how do "you" create them? How do you make your rounded box? Do you use images, standard css, or browser specific hacks?

The last time I used rounded squares i ended up using the browser specific css attribute -moz-border-radius. I admit, it was a lazy move and it only worked for about half of my visitors... but hey... it kinda worked...

I'm working on something now and I've decided to go with images.

 

[Eon-Rider]

Even though I've never used them on a website, I prefer images.

 

[Gecko]

I create 2 images, one for the round parts at the top and one for the bottom, then I create two boxes, and I place each on in the background. Top one for the top and visa versa. If the box is also suppose to have shadow effects on the outside then it's just a matter of creating a third image with the correct width, and shadow on the sides, then add a third box behind the two and add the third image. Pretty simple. Good luck.

 

[Master Kwesi Nkromah]

Yea, I doing pretty much the same thing you are, two images for the top and bottom. However, I don't make them the background of the division. I place the top curve inline with the rest of the page's content and the bottom curve at the end of the inline content. I just place padding around the content so everything looks more natural.

i still think it's a lazy approach. CSS3 supports rounded boxes right?

 

[Geometric-sama]

I'm all for cross-browser support, so I use images.

 

[pokejungle]

I use images. CSS is too finicky for them IMO.

 

[Rukario]

our sites that use a rounded box, typically are using the 2+ image method as current browsers still have issues with 100% pure css ones.

as more browser become more css3+ compliant that may change.

 

[aRedMoon]

Images all the way brotha.

 

[Master Kwesi Nkromah]

our sites that use a rounded box, typically are using the 2+ image method as current browsers still have issues with 100% pure css ones.

as more browser become more css3+ compliant that may change.

uhh.. what's the 2+ method? How do you to it?