css - 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.