Rounded Table Corners CSS Only?

Seems to work fine in FF and Chrome (haven't tested any others) with separate borders: jsfiddle.net/7veZQ/3.

Seems to work fine in FF and Chrome (haven't tested any others) with separate borders: jsfiddle.net/7veZQ/3/ Edit: Heres a relatively clean implementation of your sketch: jsfiddle.net/MuZzz/1.

Not exactly what i'm looking for. If you remove the table padding & apply border-radius to the corner cells only, you get 2px thick borders, which is ugly. Rather have no borders at all.

– Vishal Shah Feb 8 at 11:27 What are your looking for? Can you provide a sketch? – RoToRa Feb 8 at 14:06 This : dl.dropbox.Com/u/19875602/table.png.

Rounded corners for corner cells, & 1px thick border for the cells. I do have a solution right now, based on yours, but it's quite messy. – Vishal Shah Feb 8 at 19:44 Added am example of an implementation of your sketch.

– RoToRa Feb 9 at 12:29 Close. The corner cells needed border radius too.Jsfiddle.Net/JWb4T/1 Though now you see a slight gap between edge of the corner cells & the edge of the table. Can be fixed by reducing the border radius for the corner cells.

Thanks :D – Vishal Shah Feb 9 at 13:50.

Firstly, you'll need more than just -moz-border-radius if you want to support all browsers. You should specify all variants, including plain border-radius, as follows: -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; Secondly, to directly answer your question, border-radius doesn't actually display a border; it just sets how the corners look of the border, if there is one. To turn on the border, and thus get your rounded corners, you also need the border attribute on your td and th elements.Td, th { border:solid black 1px; } You will also see the rounded corners if you have a background colour (or graphic), although of course it would need to be a different background colour to the surrounding element in order for the rounded corners to be visible without a border.

It's worth noting that some older browsers don't like putting border-radius on tables/table cells. It may be worth putting a inside each cell and styling that instead. However this shouldn't affect current versions of any browsers (except IE, that doesn't support rounded corners at all - see below) Finally, not that IE doesn't support border-radius at all (IE9 beta does, but most IE users will be on IE8 or less).

If you want to hack IE to support border-radius, look at css3pie.com/ EDIT Okay, this was bugging me, so I've done some testing. Here's a JSFiddle example I've been playing with It seems like the critical thing you were missing was border-collapse:separate; on the table element. This stops the cells from linking their borders together, which allows them to pick up the border radius.

Hope that helps.

To keep the code to a minimum, i've left out the cross-browser stuff. If I give a border to td and th, they aren't rounded. I get straight edges.

Could give sample css code for a table with no css applied to it, which would demonstrate what you're saying. – Vishal Shah Feb 8 at 11:13 @Vishal Shah - I have updated my answer after doing some tests. Hope that helps.

– Spudley Feb 9 at 10:06 Your example displays a border radius for ALL the cells, where as I want it only for the corner cells. This is what I was looking for: jsfiddle. Net/JWb4T/1 – Vishal Shah Feb 9 at 13:54 @Vishal Shah - I understood the problem to be the lack of rounding anywhere on the table, rather than specifically which bits of the table should be rounded.

Glad you got it sorted in the end though (it looks like the border-collapse:separate; tip was useful in the end) – Spudley Feb 9 at 14:46.

Through personal expeirence I've found that it's not possible to round corners of an HTML table cell with pure CSS. Rounding a table's outermost border is possible. You will have to resort to using images as described in this tutorial, or any similar :).

1, and same here, recently have tried to achieve this, but no luck. Had to put inside a . ^^, – Tom Feb 8 at 11:09.

2 css3please doesn't do anything for border-radius in IE. If you want to hack IE to support border-radius, look at css3pie. Com – Spudley Feb 8 at 11:02 I'm talking about rounded property for a table specifically, not any other element.

– Vishal Shah Feb 8 at 11:17.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.