Gerador de border-radius CSS

Cada canto é um quarto de elipse

Um canto arredondado no CSS é um quarto de elipse com um raio horizontal e um raio vertical. Se você der um único número, os dois raios coincidem e o canto é um quarto de círculo. Se usar a forma com barra, eles se separam: border-radius: 60px / 20px cria cantos largos e rasos, o formato que você vê numa pílula esticada. Tudo antes da barra é horizontal, tudo depois é vertical.

A ordem, e os valores que você omite

Os cantos são listados no sentido horário a partir do superior esquerdo: superior esquerdo, superior direito, inferior direito, inferior esquerdo. Listas mais curtas espelham em vez de repetir:

• Um valor — os quatro cantos.
• Dois valores — o primeiro é superior esquerdo e inferior direito, o segundo é superior direito e inferior esquerdo. As diagonais, não os pares que você esperaria.
• Três valores — superior esquerdo, depois superior direito e inferior esquerdo juntos, depois inferior direito.
• Quatro valores — um para cada canto, no sentido horário.

A ferramenta acima sempre escreve a forma mais curta que expressa o que você montou, por isso às vezes o resultado tem menos números do que os controles deslizantes que você vê.

Porcentagens são calculadas sobre dois comprimentos diferentes

Um raio horizontal em porcentagem é calculado sobre a largura da caixa. Um raio vertical em porcentagem é calculado sobre a altura dela. Numa caixa de 400 por 100, border-radius: 20% dá um raio horizontal de 80 pixels e um vertical de 20 — um canto esticado, não um canto redondo. É por isso também que 50% produz um círculo perfeito num quadrado e uma elipse em qualquer outra coisa. Mude a caixa de prévia acima de quadrada para larga e veja um valor em porcentagem mudar de formato enquanto o número fica parado.

A regra de escala que ninguém documenta bem

O que acontece quando os raios de um lado somam mais do que o comprimento desse lado? O navegador não corta cada um separadamente. Ele calcula, para cada lado, a razão entre o comprimento do lado e a soma dos seus dois raios, pega a menor dessas razões e, se ela for menor que 1, multiplica todos os raios da caixa por esse fator.

Vale a pena conhecer a consequência: um canto grande demais encolhe silenciosamente todos os outros, na mesma proporção. Isso também significa que border-radius: 50% nunca pode quebrar, e que levar ao máximo um dos controles deslizantes acima às vezes faz outro canto parecer menor mesmo sem você ter tocado nele.

Bordas, padding e cantos concêntricos

O raio se aplica à caixa da borda. A curva interna, onde começa a caixa de padding, tem um raio igual ao raio externo menos a largura da borda, com o mínimo de zero. Isso acontece automaticamente para as bordas. Não acontece para elementos aninhados: um card com 16px de raio e 12px de padding precisa que o elemento interno fique em cerca de 4px, não em 16px, para que as duas curvas pareçam concêntricas. Repetir o mesmo número é o erro de sempre e o resultado parece sutilmente errado sem que ninguém consiga dizer por quê.

O arredondamento também recorta o fundo e a borda, mas não o conteúdo. Uma imagem ou um elemento filho com cantos quadrados vai escapar pelos cantos mesmo assim, a não ser que você adicione overflow: hidden ao pai — o que tem efeitos colaterais, já que isso cria um contêiner de rolagem e quebra position: sticky para tudo que estiver dentro.

Estes cantos não são squircles

Os cantos do CSS são arcos elípticos, e um arco encontra a aresta reta com uma mudança abrupta de curvatura. Os quadrados arredondados da tela inicial de um iPhone são superelipses, em que a curvatura entra de forma contínua, e é por isso que eles parecem mais suaves com o mesmo raio visual. Nenhuma combinação dos oito raios daqui reproduz isso. Para um squircle de verdade você precisa de um clip-path com um path, de uma máscara SVG, ou da propriedade corner-shape conforme o suporte dos navegadores chega.

Onde esta ferramenta para

Ela escreve apenas a forma abreviada. Não gera as propriedades longas por canto, como border-top-left-radius, e não gera as versões lógicas, como border-start-start-radius, que são as que você quer se o seu layout inverte para idiomas da direita para a esquerda. As formas de blob continuam sendo feitas de arcos de elipse, então elas parecem blobs de CSS e não desenhos à mão. E tudo que você montar em porcentagens vai mudar de formato sempre que o elemento mudar — os três tamanhos de prévia dão uma pista disso, mas só o seu próprio layout vai te dizer com certeza.

Perguntas frequentes

Como faço um círculo com border-radius?

Use border-radius: 50% em um elemento com largura e altura iguais. Em um retângulo o mesmo valor dá uma elipse, porque o raio horizontal é calculado sobre a largura e o vertical sobre a altura.

O que significa a barra no border-radius?

Ela separa os raios horizontais dos verticais. Os valores antes da barra definem o quanto a curva de cada canto se estende para os lados, e os valores depois definem o quanto ela se estende para cima ou para baixo. Sem a barra, os dois são iguais e cada canto é um quarto de círculo.

Por que um canto parece menor que o valor que eu defini?

Porque os raios de um lado somaram mais do que o comprimento desse lado. Quando isso acontece, o navegador escala todos os raios da caixa pelo mesmo fator até que caibam, então um canto grande demais encolhe os outros junto com ele.

Que raio deve ter o interior de um card arredondado?

O raio externo menos o padding. Um raio externo de 16px com 12px de padding pede cerca de 4px por dentro. Reutilizar o mesmo número no elemento aninhado faz com que as curvas não fiquem concêntricas, o que parece sutilmente errado mesmo quando ninguém sabe dizer o motivo.

Por que a imagem dentro da minha caixa arredondada tem cantos quadrados?

O border-radius recorta o fundo e a borda do elemento, não os filhos dele. Adicione overflow: hidden ao pai, ou dê à imagem o mesmo raio. Note que overflow: hidden cria um contêiner de rolagem e impede que position: sticky funcione dentro dele.

Última atualização 19 de setembro de 2026