View Full Version : composing the perfect CSS rounded box
Master Kwesi Nkromah
July 5th, 2007, 10:33 PM
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
July 6th, 2007, 01:31 AM
Even though I've never used them on a website, I prefer images.
Gecko
July 6th, 2007, 11:42 AM
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
July 6th, 2007, 05:33 PM
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
July 7th, 2007, 03:18 AM
I'm all for cross-browser support, so I use images.
pokejungle
July 8th, 2007, 12:49 PM
I use images. CSS is too finicky for them IMO.
Rukario
July 9th, 2007, 05:09 PM
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.
Ausaudriel
July 10th, 2007, 02:38 PM
For less serious things such as signatures and such, I just use -moz-border-radius. Nice and simple, and provides decent results. If I was working on a website and wanted some rounded edges I'd probably end up using images.
Koroku
July 10th, 2007, 04:26 PM
Images all the way brotha.
Master Kwesi Nkromah
July 11th, 2007, 04:27 PM
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?