How to add border radius on table row

Question

Does anyone know how to style tr as we like?

I've used border-collapse on table, after that tr's can display 1px solid border I give them.

However, when I've tried -moz-border-radius, it doesn't work. Even simple margin doesn't work.

Answer 1

You can only apply border-radius to td, not tr or table. I've gotten around this for rounded corner tables by using these styles:

table { border-collapse: separate; } td { border: solid 1px #000; } tr:first-child td:first-child { border-top-left-radius: 10px; } tr:first-child td:last-child { border-top-right-radius: 10px; } tr:last-child td:first-child { border-bottom-left-radius: 10px; } tr:last-child td:last-child { border-bottom-right-radius: 10px; } 

Be sure to provide all the vendor prefixes. Here's an example of it in action.

Answer 2

Actual Spacing Between Rows

This is an old thread, but I noticed reading the comments from the OP on other answers that the original goal was apparently to have border-radius on the rows, and gaps between the rows. It does not appear that the current solutions exactly do that. theazureshadow's answer is headed in the right direction, but seems to need a bit more.

For those interested in such, here is a fiddle that does separate the rows and applies the radius to each row. (NOTE: Firefox currently has a bug in displaying/clipping background-color at the border radii.)

The code is as follows (and as theazureshadow noted, for earlier browser support, the various vendor prefixes for border-radius need added).

table {      border-collapse: separate;      border-spacing: 0 10px;      margin-top: -10px; /* correct offset on first border spacing if desired */ } td {     border: solid 1px #000;     border-style: solid none;     padding: 10px;     background-color: cyan; } td:first-child {     border-left-style: solid;     border-top-left-radius: 10px;      border-bottom-left-radius: 10px; } td:last-child {     border-right-style: solid;     border-bottom-right-radius: 10px;      border-top-right-radius: 10px;  }