22.02.2025

Arredondando Cantos de Tabelas em HTML com CSS: Sem Imagens ou JS

Resposta Rápida

Para criar cantos arredondados em uma tabela usando CSS, a propriedade border-radius será útil. Ela deve ser aplicada a todos os quatro cantos, assim como aos cabeçalhos e rodapés da tabela, para garantir um estilo visual consistente.

table {
  border-collapse: separate;
  overflow: hidden;
}

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

thead tr:first-child th:first-child { border-top-left-radius: 10px; }
thead tr:first-child th:last-child { border-top-right-radius: 10px; }

tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }

Lembre-se de ajustar corretamente border-radius e garantir que overflow: hidden esteja definido para evitar que elementos internos ultrapassem os limites arredondados.

Métodos Eficazes para Arredondar Cantos

Use CSS para Eficiência

Para estilizar tabelas, é melhor usar propriedades CSS, pois isso acelera o carregamento da página e garante uma aparência consistente em diferentes navegadores.

Estilo de Bordas de Células Específicas

Utilize as pseudo-classes :first-of-type e :last-of-type para atribuir bordas arredondadas únicas a células selecionadas, melhorando o arredondamento geral da tabela.

Consistência é Fundamental

Manter um raio de borda consistente entre thead, tbody e tfoot é essencial para alcançar uma aparência atraente e harmoniosa para a sua tabela arredondada. A consistência é a chave para o sucesso, assim como seguir uma receita!

Bootstrap para Soluções Padrão

Se precisar de soluções padronizadas, considere usar o Twitter Bootstrap, que oferece estilos pré-desenhados, incluindo estilos para tabelas com cantos arredondados, economizando tempo de codificação.

Visualização

O processo de criação de cantos arredondados em uma tabela pode ser visualizado assim:

(1) 🔲 + 🔵 — uma tabela padrão coberta com uma toalha redonda. Mas isso ainda não é o que precisamos.
(2) 📐 + ✂️ — cortamos a toalha para o tamanho da tabela, semelhante ao que `border-radius` faz ao aparar excessos.
(3) 🔲 + (👗 x 🔵) — voilà! A toalha se encaixa perfeitamente. O resultado reflete o que conseguimos com CSS.

Aqui está um exemplo de estilização de uma tabela com cantos arredondados:

table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
}

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

th:first-child,
td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

th:last-child,
td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

Agora, a tabela com bordas arredondadas parece uma roupa perfeitamente ajustada, sem a necessidade de imagens extras ou JavaScript.

Área de Testes e Recursos Específicos

Desenvolvimento Rápido de Protótipos

Utilizar ferramentas como jsFiddle permite testar estilos CSS em tempo real. Isso ajuda a garantir que seu design seja compatível entre navegadores e responsivo.

Compatibilidade entre Navegadores

Tenha em mente que border-radius pode não funcionar perfeitamente no IE8 e versões mais antigas do Internet Explorer. Nesse caso, use métodos de fallback, como CSS3PIE, para suportar cantos arredondados.

Utilize CSS3 para Aparência Aprimorada

Aplique as mais recentes funcionalidades do CSS3, como sombras e gradientes, aos seus cantos arredondados para criar uma tabela impressionante. Prefixos de fornecedor ajudarão a garantir a compatibilidade com vários navegadores.

Solucionando Problemas em Navegadores Antigos

Se encontrar problemas com navegadores mais antigos, envolva os elementos td ou th dentro de tags <div> e aplique border-radius a esses.

Recursos Úteis

1. CSS Border-Radius Pode Fazer Isso? — 9elements — Uma exploração detalhada das capacidades e responsividade da propriedade border-radius.
2. border-radius - CSS: Folhas de Estilo em Cascata | MDN — Documentação oficial sobre a propriedade CSS border-radius.
3. border-radius | CSS-Tricks - CSS-Tricks — Um guia abrangente sobre como usar border-radius para aprimorar o design web.
4. Novas Perguntas sobre 'border-radius+html-table' - Stack Overflow — Uma discussão sobre perguntas relacionadas à implementação de cantos arredondados em tabelas com CSS na comunidade Stack Overflow.
5. border-radius | Posso usar... Tabelas de suporte para HTML5, CSS3, etc — Verifique a compatibilidade de border-radius com vários navegadores.

Video

Navigation