[ACCEPTED]-CSS3 border-radius on display:table-row element-css-tables

Accepted answer
Score: 31

I'm afraid this there is no way to apply 7 border radius on table rows. However, the 6 workaround is pretty simple: just apply 5 the background color and the border radius 4 to the cells.

If you remove the background 3 color from the table rows, and you can add 2 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 1 class names.

You can see it in action here: http://jsfiddle.net/jaSs8/1/

Score: 0

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

Score: 0

You also can fix this issue by setting float:left; on 3 the table element. It doesn't effect the 2 behavior of the table flexibility and works 1 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;

More Related questions