CSS style for rounded table borders?

What is the CSS style for rounded table borders?

Does it work across all the major browsers, any downsides?

According to the CSS3 Borders module still in Working Draft:

border-radius: 5px;

Mozilla implements this as
-moz-border-radius (because it hasn't been standardized yet), but no other browser provides such an implementation.

I use frontpage, which may be why it's not working:

table { border-radius: 5px; border-style: solid; border-color: #CC0000; padding:10; background-color: #FFFFFF; margin-left:auto; margin-right:auto }

You can also change individual border radius.For Mozilla that would be:
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
-moz-border-radius-topleft
-moz-border-radius-topright

Why don't you just use an image?

Cause it is easier to use style sheets than it is to make an image.

Eclipce

Ok...
I agree that CSS is easier and usually nicer looking than clunky <td> placement to get the dang borders to look nice... Now, my question is...

Can you use CSS to place image borders on a table?
Couldn't you use position-absolute or some-such to place a border top... border top right... top left...???

I would like to use images for my table borders... but I really don't wanna have to create freaking cell placements for everything...

Help me Mr. Popeil...

You could w/ absolute positioning, but it wouldn't work so well probably. If anything comes out differently for some reason, everything will be messed up. The most universal way would be to just make the table cells for the images. Shouldn't be that hard, just make a 9x9 table and put the images in the outter cells, content in the middle cell.

I hate coding HTML for something that CSS should be able to do...
It's a shame there isn't some kinda CSS code for something like:

table
{
border-top-right:url(some link here);
border-top-center:url(some link here);
border-top-left:url(some link here);
}

etc...

That would be so much easier... and cleaner too...

Ah well...
I guess until the internet restructures itself to fit my needs, I will make do with what I have...

I was trying to do the same thing and I found this thread doing a google search for "table css image borders," and also came across this page:
URL
It has a solution to your problem.

here is a better solution using purely css.

http://www.virtuelvis.com/gallery/css/rounded/

its should work in standard compatible browsers

thanks for the post but I can't see the effect from your link, and I'm using IE 6.0 on a PC! I'm trying for an effect that will work in most browsers.

If you need the effect in multiple places, you could write a JS function to generate a table... pass it the inner HTML of the table as a string argument and make the function output the 9x9 table like kicken suggested... put the function in a .js file and include it in any pages that use it if you need it on more than one page.

There is another option for curved corners on tables - the Structured Graphic Control. There's an example here - though I've no idea what it looks like in non IE5+ browsers.

That method does allow you to use a script to change the colours in all three different positions:

i) inside the border (the table background);
ii) the table border itself;
iii) outside the border (the page background).

That is not possible with a traditional image where you could only set one of the colours by using a transparent gif and then changing the cell background for whichever colour showed through the transparency.

Although the Structured Graphic option is quite workable and simple, I've never actually used it on a site (apart from demos).

My site does it. I modify the html, but I use styles to determine where the images are placed:
http://www.elknet.net/elkjac
It's not perfect, but I can change the color of the border by changing one number in the style sheet, and the border will automatically size itself lenghwise to accomadate whatever I put inside.