Resolver o css do canto arredondado do quadro

div {
  border-radius: 4px;
  -moz-border-radius: 4px
  -webkit-border-radius: 4px;
  overflow: hidden; /*notice*/
}

Ilustração:

Propriedades da linha da tabela (tr): actualizar os dados da tabela (td) para a coluna mais à esquerda:

tbody tr td:first-child
{
    border-radius: 0.6em 0 0 0.6em;
}

Propriedades da linha do quadro (tr): actualizar os dados da tabela (td) para a segunda coluna:

tbody td:nth-child(2)
{
    border-radius: 0 0.6em 0.6em 0;
}

Aqui está um exemplo: js Fiddle demo

Se tenha mais de uma coluna (td ou th) você simplesmente adiciona algo como isto:

tbody td:nth-child(2) /* This is now the middle element out of three */
{
    border-radius: 0 0 0 0;
}
tbody td:nth-child(3) /* This is now the right most column */
{
    boder-radius: 0 0.6em 0.6em 0;
}

Você pode dar id aos elementos td e usando os ids dos elementos td definir o raio de contorno para 0px.

Devias tentar um clear:both; e será reiniciado. Também você pode tentar !important porque talvez você esqueça outras "regras CSS inline" em outros códigos html.

<table>
   <tr><th colspan="3">My header</th></tr>
   <tr><td>row1-cell1</td><td>row1-cell2</td><td>row1-cell3</td></tr>
   <tr><td>row2-cell1</td><td>row2-cell2</td><td>row2-cell3</td></tr>
   <tr><th colspan="3">My footer</th></tr>
</table>

A regra para O canto superior direito substituiria a regra para o canto superior esquerdo (porque ela vem depois dela), e a regra para o canto inferior direito substituiria a regra para o canto inferior esquerdo (pelo mesmo motivo). Ver ecrã shot below:

Sobrepor os cantos http://i57.tinypic.com/v41091.jpg

O remédio para isso é o css abaixo (adicionei mais selectores para várias combinações table-tr, tbody-tr, thead-tr conforme necessário, de modo que você também pode expandi-lo para caber na sua marcação):

        table td,
        table th{
            border: 1px solid #666;
        }

        table{
            width: 98%;
            border-spacing: 0px;
        }

         /* alternating table row colors*/
        tr:nth-child(even)  { background-color:#f6f6f6; }
        tr:nth-child(odd)   { background-color:#ffffff; }

        /* set all corner radii initially to zero */
        th, td {
            border-radius: 0;
        }

        /*set only specific radii per corner (don't use the border-radius shorthand)*/
        thead tr:first-child th:first-child, 
        table tr:first-child td:first-child,
        tbody tr:first-child th:first-child {
            border-top-left-radius: 0.6em;
        }
        thead tr:first-child th:last-child, 
        table tr:first-child td:last-child,
        tbody tr:first-child th:last-child {
            border-top-right-radius: 0.6em;
        }
        tbody tr:last-child td:first-child, 
        table tr:last-child td:first-child,
        tbody tr:last-child th:first-child {
            border-bottom-left-radius: 0.6em;
        }
        tbody tr:last-child td:last-child, 
        table tr:last-child td:last-child,
        tbody tr:last-child th:last-child {
            border-bottom-right-radius: 0.6em;
        }

        thead + tbody tr td,
        tr + tr td ,
        tr + tr th {
            border-top: 0;
        }

        tr th + th,
        tr td + td {
            border-left: 0;
        }

        /* shade th cells */
        table th {
            background-color: #888;
            color: #FFF;
        }

Isto resulta na imagem abaixo, como desejado:

Cantos fixos http://i57.tinypic.com/5bqwqq.jpg

Todo o crédito por esta solução ainda vai para David Thomas , especialmente para o truque da fronteira das celas adjacentes!