CSS3 border-radius on display:table-row element
I'm afraid this there is no way to apply border radius on table rows. However, the workaround is pretty simple: just apply the background color and the border radius to the cells.
If you remove the background color from the table rows, and you can add this:
.item > div {
background-color: #ccc;
}
.item > div:first-child {
border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}
.item > div:last-child {
border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
It will work even if you change your class names.
You can see it in action here: http://jsfiddle.net/jaSs8/1/