Gerador CSS Border Radius

Entendendo o atalho border-radius

A propriedade CSS border-radius é definida no W3C CSS Backgrounds and Borders Module Level 3. O seu atalho aceita até quatro valores para cantos circulares e até oito (separados por uma barra) para cantos elípticos. A ordem dos cantos é fixa: superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo, no sentido horário a partir do superior-esquerdo, exatamente como você leria o mostrador de um relógio. A spec é inequívoca: «Se o canto inferior-esquerdo for omitido, ele é igual ao superior-direito. Se o inferior-direito for omitido, ele é igual ao superior-esquerdo. Se o superior-direito for omitido, ele é igual ao superior-esquerdo».

As quatro propriedades longas por canto permitem mirar um único canto sem escrever os outros: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Cada uma aceita um valor (um canto circular) ou dois valores (um x y elíptico).

Pixels, porcentagens e o truque dos 50%

A spec do W3C define como as porcentagens são resolvidas: «As porcentagens para o raio horizontal se referem à largura da caixa de borda, enquanto as porcentagens para o raio vertical se referem à altura da caixa de borda.» Isso produz uma consequência importante: border-radius: 50% cria um círculo perfeito apenas quando o elemento é quadrado. Em um retângulo 200×100, 50% em cada canto produz uma elipse: 100px de raio horizontal (metade da largura) e 50px de raio vertical (metade da altura).

Quando recorrer a cada unidade:

• Pixels (px): cantos precisos e fixos que não escalam com o elemento. Melhores para botões, cartões e componentes de UI consistentes.
• Porcentagens (%): escalam com o elemento. Use 50% para círculos ou elipses em componentes que mudam de forma.
• em / rem: escalam com o tamanho da fonte. Úteis para botões cujo raio de canto deve crescer com o texto dentro deles.
• calc(): misture unidades, por exemplo calc(8px + 0.5em) para uma base que escala sutilmente com o tamanho do texto.

O truque da pílula

Definir um border-radius maior do que metade do lado mais curto do elemento limita cada canto a um semicírculo verdadeiro, produzindo uma forma de pílula independentemente da largura. A convenção é border-radius: 9999px, qualquer número grande o suficiente para que nenhum elemento realista jamais o exceda. É por isso que o .rounded-pill do Bootstrap usa 50rem (~800px) e o rounded-full do Tailwind v4 resolve para calc(infinity * 1px): ambos codificam a mesma ideia, a de que um número maior do que a caixa garante uma pílula em qualquer elemento.

Cantos elípticos e formas orgânicas de blob

A forma de oito valores (com barra) é o que os designers usam para criar formas «blob» orgânicas e assimétricas que se tornaram populares para ilustrações hero e fundos decorativos. Cada canto recebe um raio horizontal diferente antes da barra e um raio vertical diferente depois, produzindo curvas que não ficam presas a arcos circulares.

/* Asymmetric blob */
.blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Variantes de propriedades lógicas para layouts RTL

O CSS Logical Properties Module Level 1 introduz quatro propriedades longas lógicas que se adaptam à direção da escrita:

• border-start-start-radius: superior-esquerdo no inglês LTR, superior-direito no árabe / hebraico RTL.
• border-start-end-radius: superior-direito no LTR, superior-esquerdo no RTL.
• border-end-start-radius: inferior-esquerdo no LTR, inferior-direito no RTL.
• border-end-end-radius: inferior-direito no LTR, inferior-esquerdo no RTL.

Útil quando o mesmo componente precisa parecer simétrico em ambas as direções de leitura: o canto «boca» de um balão de fala, por exemplo, deveria sempre ficar no lado de quem fala, não sempre à esquerda. Note que ainda não há um atalho de propriedade lógica, então você tem que escrever todas as quatro propriedades longas separadamente para optar por cantos cientes de RTL.

Borda externa vs. interna quando a borda é espessa

O raio se aplica à borda externa da borda. O navegador computa automaticamente um raio menor e concêntrico para a borda interna, para que a borda não pareça descontínua no canto. Consequência prática: um raio externo de 16px com uma borda de 2px terá um raio interno em torno de 14px, então a borda parece um quadro de espessura constante em toda a volta. Defina background-clip: padding-box se você quiser que a cor de fundo pare na borda interna em vez de vazar por baixo dela.

Convenções práticas de dimensionamento

Erros comuns

1. Usar 50% em um elemento não quadrado e esperar um círculo. 50% em um retângulo é uma elipse. Ou mantenha o elemento quadrado, ou use border-radius: 9999px para uma pílula de verdade.
2. Esquecer a ordem dos cantos. O atalho vai no sentido horário a partir do superior-esquerdo (TL TR BR BL). A forma de dois valores define os pares diagonalmente opostos, o que é fácil de lembrar errado.
3. Valores negativos. A spec os define como inválidos; o navegador silenciosamente os limita a zero. Se um canto não está arredondando do jeito que você espera, verifique se você não subtraiu por acidente.
4. Pais arredondados vazando os filhos. Um elemento com border-radius não recorta os seus descendentes por padrão. Adicione overflow: hidden no pai se você quiser que os filhos parem na borda arredondada.
5. Propriedades por canto antes do atalho. A cascata do CSS é sensível à ordem, então border-top-left-radius seguido de border-radius sobrescreve o valor por canto. Coloque o atalho primeiro, depois as sobrescritas por canto.
6. Misturar % e px de forma desajeitada. Definir um raio de 50% em um canto e 12px em outro raramente produz o que os designers esperam. Fique em uma unidade por elemento.
7. Tabelas e border-collapse: collapse. A referência do MDN é explícita: o border-radius não se aplica a elementos table ou inline-table quando as bordas estão colapsadas. Ou mude para border-collapse: separate, ou aplique o raio a um elemento envoltório.

Mais perguntas frequentes

Por que a minha imagem não está ficando com cantos arredondados?

Se a imagem está dentro de um contêiner com border-radius mas os cantos ainda parecem retos, o pai não está recortando. Adicione overflow: hidden ao pai. Como alternativa, aplique border-radius diretamente ao elemento <img>; as imagens respondem à propriedade nativamente.

O border-radius afeta o desempenho?

Desprezivelmente. Os navegadores modernos renderizam os cantos arredondados na GPU e o custo é essencialmente idêntico ao de uma borda reta. A exceção é animar o border-radius em um elemento grande a cada quadro (pode disparar a recomposição de camadas), mas os cantos arredondados estáticos são, na prática, de graça.

Isso funciona em navegadores mais antigos?

Sim. Todo navegador desde o IE9 suporta o border-radius sem prefixo. As variantes de propriedade lógica (border-start-start-radius etc.) são mais novas: Chrome 89+, Firefox 66+, Safari 15+. Para navegadores mais antigos que precisam do comportamento lógico, escreva um pequeno bloco @supports como fallback.

Como eu faço um balão de fala?

Use as quatro propriedades longas por canto para arredondar três cantos e deixar o quarto pequeno ou reto. Essa é a «boca» apontando para quem fala. Por exemplo, um balão de mensagem enviada: border-radius: 16px 16px 4px 16px;. Para balões cientes de RTL, mude para propriedades longas lógicas, para que a boca vire com a direção de leitura.

Por que os meus botões pílula parecem irregulares em larguras de elemento diferentes?

Uma pílula limita cada canto a metade do lado mais curto, que é a altura em um botão típico. Então botões mais baixos recebem raios menores e botões mais altos recebem raios maiores. Esse é o comportamento desejado. Se você quer um raio constante em todo botão independentemente do tamanho, use um valor fixo em pixels (por exemplo, border-radius: 24px) em vez do truque da pílula.

Posso copiar o CSS direto para projetos Tailwind / Bootstrap?

Sim, o CSS gerado é sintaxe padrão simples, sem dependências de pré-processador ou framework. No Tailwind v4, você também pode escrever valores arbitrários como utilitários (rounded-[12px] ou rounded-[30%/70%]) se preferir ficar no estilo de classes utilitárias.