HTML Table com bordas arredondadas.

Por uma questão de necessidade momentânea, tive em um projeto de montar uma tabela com todas as bordas arredondadas.

Procurei na internet e tive a seguinte solução mostrada abaixo.

Achei pratica e simples, por isso resolvi compartilhar aqui. Só usei uma vez e não acho que vou usar novamente a solução tão cedo. Em todo caso ai vai.

Montado a tabela HTML

<table>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
        </tr>
        <tr>
            <td>C</td>
            <td>D</td>
        </tr>
    </tbody>
</table>

Aplicando o CSS na tabela criada.

table {
    border-collapse: separate;
    border-spacing: 0;
}

table, td {
    border: 1px solid black;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px;
}
Exemplo de tabela com bordas arredondadas

Saida

Qualquer dúvida ou dicas, entre em contato: leandrolt@gmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *