Gerador Border Radius CSS Grátis: Cantos Arredondados Visual

A Este gerador produz propriedades CSS padrão, não propriedades personalizadas como `--radius: 20px`. Você precisa envolver manualmente a saída em uma chamada `var()` dentro da sua folha de estilo. Cole o código, substitua o valor por `var(--meu-raio)`. O gerador foi feito para ajustes visuais rápidos — para variáveis CSS, copie os valores você mesmo. Leva cerca de 30 segundos.

A Cantos arredondados usam aceleração GPU em navegadores modernos, então são mais rápidos que sombras ou gradientes complexos. Mas empilhar dezenas de elementos com border-radius num celular antigo drena a bateria. Freelancers já colocaram 50+ cards arredondados numa página — é aí que você vê a lentidão. Fique abaixo de 30 elementos com raios menores que 20px em Androids baratos. Teste num Moto G de 2019 para garantir.

A Não, não tem atalho de teclado pra isso. Você precisa clicar no botão de reset ou definir cada canto pra 0 manualmente. Já vi freelancers gastarem dez minutos ajustando cantos que queriam resetar — é só clicar no ícone de reset no canto superior direito. Ele limpa todos os campos na hora.

A Só se o elemento for um quadrado perfeito e você definir todos os cantos para 50%. Em uma caixa de 200x200px, border-radius: 50% cria um círculo verdadeiro. Mas em um retângulo de 300x200px, 50% gera uma oval — os raios horizontal e vertical são diferentes. O gerador mostra isso ao vivo: arraste um controle deslizante em uma caixa retangular. Você verá ela se transformar em formato de pílula quando todos os quatro cantos atingirem 50%. Isso não é bug, é como a matemática do CSS funciona.

A É exatamente para isso que serve o botão de desvincular. Clique nele para separar os quatro cantos, depois ajuste o superior esquerdo e o inferior direito para o raio desejado, mantendo os outros dois em 0. Para um efeito de folha num botão de 120px de largura, experimente 60px nesses cantos diagonais. Você terá um contorno de gota suave. A pré-visualização atualiza na hora, então mexa nos controles até a forma ficar natural. Se se perder, o ícone de redefinição volta tudo para zero.

A Versões antigas do Firefox tinham um bug de arredondamento de subpixel, deixando curvas serrilhadas abaixo de 4px de raio. O Chrome renderiza esses mesmos valores de forma suave. Seu código gerado não está errado — o motor de renderização é que difere. Use pelo menos 6px de raio para esconder a discrepância, e adicione `-moz-border-radius` apenas se precisar suportar Firefox ESR 102. Para navegadores modernos, a propriedade padrão resolve. Eu confiro minha saída nos dois antes de entregar qualquer trabalho para cliente.

A De forma alguma. Combine porcentagens, pixels e cantos desvinculados para criar formas orgânicas. Um elemento de 100px com o canto superior esquerdo em 100%, o superior direito em 20px e os dois inferiores em 0 gera uma gota inclinada. Exporte o código e use clip-path se precisar de curvas côncavas. Os presets do gerador aceleram o processo de experimentação. A largura da borda também influencia bastante o resultado visual.

A Sim, você pode animar mudanças de border-radius ao passar o mouse sobre botões ou cartões. Adicione uma duração de transição como 0.3s ease ao código CSS gerado. Quando o usuário passa o cursor, os cantos mudam perfeitamente de quadrado para redondo. Apenas certifique-se de que as unidades inicial e final coincidem. Animar de pixels para porcentagens pode causar um salto estranho no meio da animação.

A O código deste gerador estiliza apenas o container, então as fotos vão vazar para fora se você não usar overflow hidden. Eu tropeçuei nisso num projeto recente. Adicione `overflow: hidden` logo abaixo do border-radius no seu arquivo CSS. Isso faz a imagem respeitar a curva perfeitamente sem vazar pelas pontas. Teste com uma foto para garantir o encaixe.