Give table cells rounded corners (or the contents)

Question

Is it possible to give table cells, or their contents, rounded edges in CSS.

I have not included code as it would just be a blank table.

Answer 1

Yes. It works pretty much as you’d expect so long as the borders aren’t collapsed.

td {
    border: 0.1em solid black;
    border-radius: 1em;
}

demo

How good you can make it look is another matter entirely =)

Answer 2

@minitech is correct, so: if you are using table{border-collapse: collapse;}, you could wrap the content of your td's in a div, for example, and then apply the rounded corners to the div:

Example, please see this JSFiddle:

*{margin:0;padding:0;border:0;}
table{border-spacing: 0;}
td
{
    border: 1px solid black;
    border-radius: 10px;
}

.with
{
    border-collapse: collapse;
}
.with td
{

    border: 0;
}
.with td > div
{
    border: 1px solid black;
    border-radius: 10px;
}