Um canto arredondado no CSS é um quarto de elipse, e cada canto tem dois raios: um horizontal e um vertical. border-radius: 24px define os oito de uma vez, e é por isso que a propriedade parece um único controle. As formas mais longas permitem separá-los: até quatro cantos listados no sentido horário a partir do superior esquerdo, e uma barra separando o conjunto horizontal do vertical. Esse é o modelo inteiro. O que sobra são regras de abreviação e um comportamento de redução que pega todo mundo pelo menos uma vez.
O que significam os quatro valores
Os cantos são listados no sentido horário começando pelo superior esquerdo: superior esquerdo, superior direito, inferior direito, inferior esquerdo. A mesma direção de margin e padding, mas com outro ponto de partida: aquelas começam pelo lado de cima, esta começa por um canto.
Listas mais curtas espelham em vez de repetir, e a forma de dois valores é a que faz as pessoas tropeçarem:
- Um valor: os quatro cantos.
- Dois valores: o primeiro é o superior esquerdo e o inferior direito; o segundo, o superior direito e o inferior esquerdo. São as diagonais. Se você esperava “o par de cima, o par de baixo”, vai construir a forma errada e ficar olhando para ela por um bom tempo.
- Três valores: o superior esquerdo, depois a outra diagonal (superior direito e inferior esquerdo) juntos, e depois o inferior direito.
- Quatro valores: um para cada canto, no sentido horário.
Cada canto também tem sua própria forma longa: border-top-left-radius e suas três irmãs. Use essas quando quiser mudar um canto sem redeclarar os outros três.
O que a barra faz
A barra separa os raios horizontais dos verticais. border-radius: 60px / 20px dá quatro cantos que chegam a 60 px para os lados e só 20 px para cima ou para baixo: curvas largas e rasas, a forma que você obtém em uma pílula esticada. Tudo antes da barra é horizontal, tudo depois é vertical, e cada lado da barra segue as mesmas regras de espelhamento de um a quatro valores vistas acima.
É daí que vêm os oito raios: quatro cantos vezes dois eixos. Escrito por extenso, border-radius: 40px 20px 60px 10px / 10px 60px 20px 40px é válido e completamente ilegível.
Ninguém escreve isso à mão. Esse é o argumento honesto a favor de um gerador de border-radius com prévia em tempo real: você liga os cantos elípticos, arrasta os oito sliders e copia a linha. Ele reduz cada conjunto de quatro valores à forma mais curta que ainda significa a mesma coisa, então a saída fica mais limpa do que o que você teria digitado. Ele tem dois limites que vale conhecer antes. Os sliders param em 100, então o truque da pílula com um valor gigante, lá embaixo, é você que digita na mão. E ele escreve só a forma abreviada: nada de formas longas por canto, nem propriedades lógicas como border-start-start-radius, que é o que você precisa se o seu layout inverte para idiomas da direita para a esquerda.
As formas longas por canto também aceitam os dois raios, mas com um espaço em vez de uma barra: border-top-left-radius: 40px 20px significa 40 px na horizontal e 20 px na vertical. A barra só existe na forma abreviada, porque a abreviação precisa de um jeito de distinguir dois grupos de quatro.
px, rem ou porcentagem?
Um raio em px não muda. Em rem ele escala com o tamanho de fonte raiz, então um canto de 0.25rem tem 4 px com a raiz padrão de 16 px e 6 px para quem aumentou esse valor para 24. Se isso é uma melhoria depende do raio: invisível a 4 px, bem visível em um card de 24 px. O mesmo trade-off aparece ao escolher entre px, rem e em no resto do seu CSS.
As porcentagens são o caso interessante, porque um mesmo número é resolvido em relação a dois comprimentos diferentes. O raio horizontal é calculado sobre a largura do elemento; o vertical, sobre a altura. Em uma caixa de 400 por 100, border-radius: 20% produz um raio horizontal de 80 px e um vertical de 20 px. Não é um canto redondo; é um canto esticado, e ele muda de forma toda vez que a caixa muda.
É também por isso que 50% dá um círculo perfeito em um quadrado e uma elipse em todo o resto. Se você quer uma pílula —um retângulo totalmente arredondado cuja seção reta do meio continua reta— as porcentagens são a ferramenta errada. Use um valor em pixels absurdo e deixe a regra de redução abaixo fazer o trabalho.
Por que um canto saiu menor que o número que você definiu
Coloque border-radius: 200px em uma caixa de 200 por 60 e você não vai ter cantos de 200 px. Você vai ter cantos de 30 px. O navegador não corta cada raio sozinho; ele redimensiona todos juntos.
A regra, tirada da especificação CSS Backgrounds and Borders: para cada lado da caixa, divida o comprimento do lado pela soma dos dois raios que o tocam. Pegue a menor dessas quatro razões. Se ela for menor que 1, multiplique todos os raios do elemento por esse fator.
Duas consequências que vale guardar na cabeça. Primeira, um canto grande demais encolhe os outros três proporcionalmente e em silêncio: você aumenta o slider do superior esquerdo e a curva do inferior direito fica mais achatada sozinha, sem você encostar nela. Segunda, um valor enorme nunca consegue transbordar ou quebrar: border-radius: 9999px naquela caixa de 200 por 60 é reduzido para exatamente 30 px nos quatro cantos, que é metade do lado curto, que é uma pílula perfeita. Esse é todo o truque por trás do 9999px que você vê nas folhas de estilo dos outros. Não é um número mágico, é só grande o bastante para a redução sempre disparar.
Dá para ver isso sem abrir o dev tools. Coloque border-radius: 100px em uma caixa de 320 por 170 e os cantos saem com 85 px —metade da altura— porque os dois raios empilhados em cada lado curto queriam 200 px e só havia 170 disponíveis. Deixe a caixa com 201 px de altura e a mesma declaração finalmente te dá os 100 px que você pediu. Nada mudou no CSS.
Arredondar uma caixa não arredonda o que está dentro dela
O raio corta o fundo e a borda do próprio elemento. Ele não corta os filhos. Coloque uma imagem quadrada dentro de um card arredondado e os cantos da imagem aparecem retos: um motivo comum para as pessoas concluírem que o border-radius não está funcionando.
Duas correções, as duas com um custo. Dar à imagem o mesmo raio, o que funciona até o card ter padding e as curvas deixarem de se alinhar. Ou colocar overflow: hidden no pai, o que corta tudo mas transforma o card em um contêiner de scroll: isso quebra position: sticky dentro dele e pode cortar um dropdown feito para escapar da caixa.
Algumas coisas seguem a curva de graça. Um box-shadow traça o contorno arredondado automaticamente em vez de desenhar um retângulo atrás, e os navegadores atuais também curvam o outline de foco para combinar.
O interior de um card não tem o mesmo raio que o exterior
Aninhe um elemento arredondado dentro de outro arredondado, dê a eles o mesmo raio e o resultado fica levemente errado de um jeito que a maioria não sabe nomear. As duas curvas não são concêntricas.
A correção é aritmética: raio interno = raio externo − padding. Um card com raio de 16 px e 12 px de padding pede cerca de 4 px no elemento de dentro. Se o padding for maior que o raio, o elemento interno deve ser quadrado.
Os navegadores já fazem isso para as bordas. A curva interna, onde a caixa de padding começa, é o raio externo menos a largura da borda, com o mínimo em zero: assim, um raio de 6 px com uma borda de 8 px dá um canto interno em ponta e um externo arredondado. Só que isso não acontece entre elementos separados, porque o navegador não faz ideia de que eles deveriam parecer relacionados.
O que o border-radius não consegue fazer
Ele não consegue fazer um squircle. Os retângulos arredondados da tela inicial do iPhone são superelipses: a curvatura entra aos poucos, então não existe um momento visível em que a aresta reta vira a curva. Um canto de CSS é um arco elíptico, e um arco encontra a aresta reta com uma mudança brusca de curvatura. Nenhuma combinação dos oito raios reproduz a forma mais suave. Para isso você precisa de um clip-path com um path, uma máscara SVG ou da nova propriedade corner-shape conforme o suporte a ela avança.
Ele também não faz nada em uma tabela que usa border-collapse: collapse. A especificação exclui esse caso por completo, então se você precisa de cantos arredondados em uma tabela, mude para border-collapse: separate e arredonde as células dos cantos, ou envolva a tabela em um contêiner arredondado.
E sozinho ele carrega muito pouco significado. Dois cards a 8 px e 12 px não são lidos como níveis diferentes de importância. A profundidade vem da elevação, e como o box-shadow constrói essa sensação de camadas é a outra metade de fazer um card parecer um card.
Oito raios é mais do que qualquer um consegue guardar na cabeça, então o jeito mais rápido de chegar na forma que você quer é arrastar os sliders do gerador de border-radius e copiar a linha que ele escreve. O botão de blob aleatório também vale um clique: trocar cada canto por uma porcentagem independente é a maneira mais rápida de sentir o quanto os oito valores conseguem deformar um retângulo.
Cantos arredondados são metade do que faz um elemento parecer uma superfície elevada. A outra metade é a sombra, e errar nessa é mais óbvio: como o box-shadow do CSS realmente funciona cobre spread, blur e por que uma única sombra dura sempre parece barata.
Perguntas frequentes
Como o border-radius funciona no CSS?
Cada canto é desenhado como um quarto de elipse com um raio horizontal e um raio vertical. Um único valor define todos os oito raios, então cada canto vira um quarto de círculo. Listar mais valores os atribui a cantos específicos, no sentido horário a partir do superior esquerdo.
Como faço um formato de pílula com border-radius?
Defina um valor em pixels muito maior que o elemento, como border-radius: 9999px. O navegador reduz todos os raios até que eles caibam, o que resulta em exatamente metade do lado mais curto e dá uma ponta totalmente arredondada. Porcentagens não funcionam aqui, porque 50% curva a seção reta do meio e a transforma em uma elipse.
Posso arredondar só um canto?
Sim. Use a forma longa daquele canto, como border-bottom-right-radius: 12px, ou escreva quatro valores abreviados com zeros nas outras três posições. A forma longa é mais segura dentro de um componente, porque não apaga um raio definido em outro ponto da cascata.
Por que o meu border-radius não está funcionando?
As três causas mais comuns são um elemento filho que não está sendo cortado, uma tabela com border-collapse em collapse e raios que foram reduzidos porque não cabiam na caixa. Uma imagem quadrada dentro de um card arredondado precisa de overflow: hidden no pai ou do mesmo raio na própria imagem.
Devo usar pixels ou porcentagens para border-radius?
Pixels para quase tudo, porque assim o canto fica igual seja qual for o tamanho final do elemento. Porcentagens são resolvidas contra a largura na horizontal e contra a altura na vertical, então o mesmo número produz um canto esticado em qualquer caixa que não seja quadrada. Recorra a 50% quando você quiser especificamente um círculo ou uma elipse.
Última atualização 19 de setembro de 2026