CSS3 border-radius on display:table-row element

Answer 1

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/

Answer 2

You also can fix this issue by setting float:left; on the table element. It doesn't effect the behavior of the table flexibility and works like a charm.

table {
 float: left;
 display: table;
 width: 100%;
 border-collapse: collapse;
}
tr {
 display: table-row;
 width: 100%;
 padding: 0;
}
td {
 font-weight: bold;
 background: #fff;
 display: table-cell;
 border-radius: 10px;
}

Answer 3

Maybe the problem is in divContainer class. Try to change the display attribute to table-row.