Cantos arredondados da mesa somente CSS

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:

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?

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>

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

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>

Você pode brincar com isso aqui (no jsFiddle)

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.

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;
}

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.

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 :)

É 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>

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.

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;
}

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>

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>

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/

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.

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

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.

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>

CSS:

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

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}