Cantos arredondados da mesa somente CSS

86

Procurei e procurei, mas não consegui encontrar uma solução para minha necessidade.

Eu tenho uma tabela HTML simples e velha. Eu quero cantos arredondados para ele, sem usar imagens ou JS, ou seja, apenas CSS puro . Como isso:

Esboço do layout da mesa

Cantos arredondados para células de canto e 1pxborda espessa para células.

Até agora eu tenho isso:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Mas isso me deixa sem fronteiras para as células. Se eu adicionar bordas, elas não serão arredondadas!

Alguma solução?

html css html-table rounded-corners Vishal Shah
fonte
1
Você já tentou adicionar border aos elementos TD usando moz-border-radius? Além disso, esteja ciente de que isso não funcionará no IE, o IE ainda mostrará bordas retas.
Fermin
Olhando para as respostas e seus comentários, não fica claro o que você quer: onde você quer cantos arredondados? mesa, células da tabela, apenas células nos cantos da sua mesa?
BiAiB
3
Acho que é bastante óbvio pelo título da pergunta, cantos da mesa
Vishal Shah
@VishalShah +1 para uma pergunta realmente útil. Eu estava usando cegamente uma classe jQuery UI de canto arredondado projetada para os widgets da UI, mas apliquei-a aos elementos da tabela e tudo deu certo. Portanto, agora ainda posso usar meu tema de IU jQuery com um widget baseado em tabela.
DavidHyogo

Respostas:

90

Parece funcionar bem no FF e no Chrome (não testei nenhum outro) com bordas separadas: http://jsfiddle.net/7veZQ/3/

Edit: Aqui está uma implementação relativamente limpa de seu esboço: 

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}
<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>
Expandir snippet

http://jsfiddle.net/MuZzz/3577/

RoToRa
fonte
Não é exatamente o que estou procurando. Se você remover o preenchimento da tabela e aplicar raio de borda apenas às células de canto, obterá bordas de 2px de espessura, o que é feio. Em vez disso, não tem fronteiras.
Vishal Shah
3
Fechar. As células de canto também precisavam de raio de borda. jsfiddle.net/JWb4T/1 Embora agora você veja uma pequena lacuna entre a borda das células do canto e a borda da mesa. Pode ser corrigido reduzindo o raio da borda das células de canto. Obrigado: D
Vishal Shah
Fico feliz por você ter resolvido isto. Observe que first-childe last-childnão funciona no IE6 / 7/8, mas é menos problemático para você, pois nenhum dos dois funciona border-radius. Isso significa que você não poderá usar CSS3Pie para consertá-lo no IE - ele consertará o raio da borda, mas não o primeiro / último filho.
Spudley de
Adicionar border-collapse: separate;ao modelo Zurb Ink resolveu para mim.
Johan Dettmar,
1
talvez isso parecesse bom há 7 anos, mas hoje as bordas das células não se conectam usando esta solução, então parece horrível.
rtaft de
23

Para mim, a solução de bootstrap do Twitter parece boa. Exclui o IE <9 (sem cantos arredondados no IE 8 e inferior), mas tudo bem, eu acho, se você desenvolver Web-Apps em potencial.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}
<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>
Expandir snippet

Você pode brincar com isso aqui (no jsFiddle)

Lars Schinkel
fonte
17

Em primeiro lugar, você precisará de mais do que apenas -moz-border-radiusse deseja oferecer suporte a todos os navegadores. Você deve especificar todas as variantes, incluindo simples border-radius, como segue:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Em segundo lugar, para responder diretamente à sua pergunta, border-radiusna verdade não exibe uma borda; apenas define a aparência dos cantos da borda, se houver.

Para ativar a borda e, assim, obter seus cantos arredondados, você também precisa do borderatributo em seus elementos tde th.

td, th {
   border:solid black 1px;
}

Você também verá os cantos arredondados se tiver uma cor de fundo (ou gráfico), embora seja claro que precisaria ser uma cor de fundo diferente do elemento ao redor para que os cantos arredondados fossem visíveis sem borda.

É importante notar que alguns navegadores mais antigos não gostam de colocar border-radiustabelas / células de tabelas. Pode valer a pena colocar um <div>dentro de cada célula e estilizá-lo. No entanto, isso não deve afetar as versões atuais de nenhum navegador (exceto o IE, que não oferece suporte para cantos arredondados - veja abaixo)

Finalmente, não que o IE não tenha suporte border-radiusalgum (o IE9 beta tem, mas a maioria dos usuários do IE estará no IE8 ou menos). Se você deseja hackear o IE para suportar border-radius, dê uma olhada em http://css3pie.com/

[EDITAR]

Ok, isso estava me incomodando, então fiz alguns testes.

Aqui está um exemplo JSFiddle com o qual estou testando

Parece que o que estava faltando era border-collapse:separate;o elemento da mesa. Isso impede que as células vinculem suas bordas, o que permite que elas captem o raio da borda.

Espero que ajude.

Spudley
fonte
Para manter o código no mínimo, deixei de fora o cross-browser. Se eu der uma borda para td e th, eles não serão arredondados. Eu obtenho bordas retas. Poderia fornecer um código css de amostra para uma tabela sem css aplicado a ela, o que demonstraria o que você está dizendo.
Vishal Shah
@Vishal Shah - Eu atualizei minha resposta depois de fazer alguns testes. Espero que ajude.
Spudley de
Seu exemplo exibe um raio de borda para TODAS as células, conforme eu quero apenas para as células de canto. Isso é o que eu estava procurando: jsfiddle.net/JWb4T/1
Vishal Shah
@Vishal Shah - Eu entendi que o problema era a falta de arredondamento em qualquer lugar da mesa, e não especificamente quais partes da mesa deveriam ser arredondadas. Ainda bem que você border-collapse:separate;
resolveu
1 para o colapso da borda: ponta separada. Isso realmente me ajudou.
DavidHyogo
12

A resposta selecionada é terrível. Eu implementaria isso visando as células da tabela de canto e aplicando o raio da borda correspondente.

Para obter os cantos superiores, defina o raio da borda no primeiro e último tipo dos ésimos elementos e, em seguida, termine definindo o raio da borda no último e primeiro do tipo td no último do tipo tr para obter os cantos inferiores.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
Luke Flournoy
fonte
Isso é muito melhor do que todas as outras respostas ... Isso é incrivelmente simples e elegante!
Eric Cote
Que bom que pude ajudar!
Luke Flournoy
Isso funciona muito bem, mas eu tenho outra mesa com thelementos na parte superior e esquerda da mesa e isso não funciona para isso. Como faço para arredondar os cantos desse tipo de mesa?
nenur
7

A melhor solução que encontrei para cantos arredondados e outros comportamentos CSS3 para o IE <9 pode ser encontrada aqui: http://css3pie.com/

Faça download do plug-in e copie para um diretório em sua estrutura de solução. Em seguida, em sua folha de estilo, certifique-se de ter a tag de comportamento para que seja inserida no plug-in.

Exemplo simples do meu projeto que me dá cantos arredondados, gradiente de cor e sombra de caixa para minha mesa:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Não se preocupe se o IntelliSense de CSS do Visual Studio fornecer o sublinhado verde para propriedades desconhecidas; ele ainda funciona quando você o executa. Alguns dos elementos não estão documentados de forma muito clara, mas os exemplos são muito bons, especialmente na primeira página.

Patrick Rodriguez
fonte
6

Por experiência pessoal, descobri que não é possível arredondar os cantos de uma célula de uma tabela HTML com CSS puro. É possível arredondar a borda externa de uma mesa.

Você terá que recorrer ao uso de imagens conforme descrito neste tutorial , ou qualquer semelhante :)

Kyle
fonte
1
1, e mesmo aqui, recentemente tentei conseguir isso, mas sem sorte. Tive que colocar dentro de um <div>. ^^,
tomsseisums
4

É um pouco difícil, mas aqui está algo que eu montei que é composto inteiramente de CSS e HTML.

  • Cantos externos arredondados
  • Linha de cabeçalho
  • Várias linhas de dados

Este exemplo também usa a :hoverpseudo classe para cada célula de dados <td>. Os elementos podem ser facilmente atualizados para atender às suas necessidades e o foco pode ser desabilitado rapidamente.

(No entanto, ainda não consegui :hoverfuncionar corretamente para linhas inteiras <tr>. A última linha suspensa não é exibida com cantos arredondados na parte inferior. Tenho certeza de que há algo simples que está sendo esquecido.)

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}
<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>
Expandir snippet

K. Parker
fonte
Esta deve ser a resposta aprovada. Obrigado!
encarnado em
1

Adicione um <div>wrapper ao redor da tabela e aplique o seguinte CSS

border-radius: x px;
overflow: hidden;
display: inline-block;

para este invólucro.

Ubby
fonte
1

Para adaptar a resposta brilhante de @luke flournoy - e se você não estiver usando them sua mesa, aqui está todo o CSS que você precisa para fazer uma mesa redonda:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
freeworlder
fonte
0

Para uma tabela com borda e rolável, use isto (substituir variáveis, $textos iniciais)

Se você usar thead, tfootou th, basta substituir tr:first-childe tr-last-childe tdcom eles.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>
brauliobo
fonte
0

Você pode tentar fazer isso se quiser os cantos arredondados de cada lado da mesa sem tocar nas células: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>
Younes Hadry
fonte
0

HTML de amostra

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, facilmente convertido para CSS, use sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Leandro Barbosa
fonte
0

O que se segue é algo que usei e que funcionou para mim em todos os navegadores, então espero que ajude alguém no futuro:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Obviamente, a #contentblockparte pode ser substituída / editada conforme necessário e você pode encontrar o border-radius.htcarquivo fazendo uma pesquisa no Google ou em seu navegador favorito.

Ansipants
fonte
0

Isto é css3, apenas o navegador não IE <9 recente oferece suporte a ele.

Verifique aqui , ele deriva a propriedade round para todos os navegadores disponíveis

BiAiB
fonte
4
css3please não faz nada para border-radius no IE. Se você quiser hackear o IE para suportar border-radius, dê uma
Spudley
Estou falando especificamente sobre propriedade arredondada para uma tabela, não para qualquer outro elemento.
Vishal Shah
0

Adicionar entre <head>tags:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

e no corpo:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

A cor da célula, conteúdo e formatação são, obviamente, por exemplo;
trata-se de espaçar células preenchidas com cores em um div. Fazendo isso, as bordas pretas da célula / borda da tabela são na verdade a cor de fundo div.
Observe que você precisará definir o div-border-radius cerca de 2 valores maiores do que os raios da borda do canto da célula separada, para obter um efeito de canto arredondado suave.

Paul Schuddebeurs
fonte
0

Lição nas bordas da mesa ...

NOTA: O código HTML / CSS abaixo deve ser visualizado apenas no IE. O código não será renderizado corretamente no Chrome!

Precisamos lembrar que:

  1. Uma mesa tem uma borda: seu limite externo (que também pode ter um raio de borda).

  2. As próprias células TAMBÉM têm bordas (que também podem ter um raio de borda).

  3. As bordas da tabela e da célula podem interferir umas nas outras:

    A borda da célula pode atravessar a borda da mesa (ou seja: limite da mesa).

    Para ver esse efeito, altere as regras de estilo CSS no código abaixo da seguinte maneira:
    i. tabela {colapso da borda: separado;}
    ii. Exclua as regras de estilo que circundam as células do canto da tabela.
    iii. Em seguida, brinque com espaçamento de borda para que você possa ver a interferência.

  4. No entanto, a borda da tabela e as bordas da célula podem ser COLLAPSED (usando: border-collapse: collapse;).

  5. Quando estão recolhidas, as bordas da célula e da tabela interferem de maneira diferente:

    Eu. Se a borda da tabela for arredondada, mas as bordas da célula permanecerem quadradas, a forma da célula terá precedência e a tabela perderá seus cantos curvos.

    ii. Por outro lado, se as células do canto são curvas, mas o limite da mesa é quadrado, você verá um canto quadrado feio contornando a curvatura das células do canto.

  6. Dado que o atributo da célula tem precedência, a maneira de contornar os quatro cantos da mesa é por:

    Eu. Recolhendo bordas na mesa (usando: border-collapse: collapse;).

    ii. Definindo a curvatura desejada nas células de canto da mesa.
    iii. Não importa se os cantos da mesa são arredondados (ou seja: o raio da borda pode ser zero). 

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}
			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>
Expandir snippet

IqbalHamid
fonte
-1

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}
Goran Vasic
fonte
Explique
@SrivatsShankar Escrevi isso há muito tempo, então a julgar por -1, suponho que não funcione mais. Meu objetivo era adicionar "border-radius" à <table>, e então "overflow: hidden" ocultaria as bordas externas de <td>. Suponho que você poderia tentar adicionar "border-radius", "border" e "overflow: hidden" a <div> que é um wrapper para <table> e, em seguida, adicionar bordas dentro de cada <td> (I faria o primeiro e o último elemento de cada linha / coluna sem a borda externa, porque <div> terá uma borda arredondada, assim como na imagem)
Goran Vasic
justo. Isso faz sentido. Não dá o resultado exato solicitado, mas vejo seu ponto. Se você pudesse editar sua resposta, posso modificar minha pontuação. :-)
Srivats Shankar