Best way to achieve rounded rectangles on an html site

[Fromethius]

Hello,

For the site I am working on I am currently using tables to display everything. Although it looks nice, I think it would look better with rounded rectangles (what doesn't?). All the methods I have found so far requiring using photoshop and generating around 9 images (the four corners, the 4 sides, and a dot) and then positioning them using fine css (which isn't necessarily a problem) and html divs and so far I have not gotten any to work properly.

I'm not looking for a fancy orange and pink striped rounded rectangle with shadows, but rather, a simple black or maybe light or dark grey normal table, except with curved edges.

Hopefully this isn't too difficult?

[dejo]

Check this out:

http://www.the-art-of-web.com/css/border-radius/

[angelwatt]

Check this out:

http://www.the-art-of-web.com/css/border-radius/

Too bad for the lack of support on it for now. Images seem to only decent way of doing this unfortunately. I've seen some wild CSS for creating interesting shapes, but usually not worth it.
http://www.howtocreate.co.uk/tutorials/css/slopes
http://www.csstextwrap.com/
http://infimum.dk/HTML/slantinfo.html
http://tantek.com/CSS/Examples/polygons.html (shapes done with CSS)

I'm personally hoping SVG will catch on more. It's a great way to have graphics and they're scalable.

[design-is]

Another good resource:

http://www.cssplay.co.uk/boxes/

[ChicoWeb]

You can use the pseudo tags of :before and :after on a div. However you'll need an IE hack, but it's a fairly streamlined approach in my opinion.

Also, you can use background positioning, so only one image is used.
For example, this site : http://cwfaction.chicodev.com/announcements/agribusiness-ownership-transition/you-still-you.html, the left hand navigation is built from one image: http://cwfaction.chicodev.com/ui/images/public/layout/sidebar-bg.gif

Or you could use a combination of both :eek:

[pinktank]

there are also css generators that make you coded boxes

[MojoWill]

you might find this tutorial on one of my sites useful!

http://e107designs.org/e107_plugins/content/content.php?content.47

[Fromethius]

I got it working use this code:

http://www.cssplay.co.uk/boxes/snazzy.html

[design-is]

I got it working use this code:

http://www.cssplay.co.uk/boxes/snazzy.html

Glad to be of help :)