Gerador Border Radius CSS Grátis: Cantos Arredondados Visual

A border-radius: 50% em elemento quadrado.

A Sim, cada canto tem seu valor.

A Clicar no botão 'desvincular' desconecta os controles individuais de cada canto. Isso significa que você pode ajustar o raio de um canto sem afetar os outros. Você verá os quatro campos de entrada se tornarem independentes. É útil para criar designs assimétricos.

A Sim, você pode alternar entre pixels e porcentagens no gerador. As porcentagens são relativas às dimensões do elemento, não ao raio em si. Um valor de 50% em uma caixa de 200px de largura cria um raio de 100px nos cantos. Isso é crucial para layouts responsivos onde o tamanho do elemento muda. Use porcentagens quando seu design precisar escalar suavemente entre diferentes telas.

A Se você usou pixels, o raio fica fixo independente do tamanho da tela. Num celular, um raio de 40px parece enorme comparado ao desktop. Mude para porcentagens — elas escalam com o elemento. Exemplo: 10% continua proporcional, seja seu botão de 150px ou 300px de largura. Teste seu design antes na prévia responsiva do gerador.

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.