Gerador de Border Radius CSS
Este gerador de border radius CSS permite desenhar cantos arredondados de forma visual e copiar um CSS limpo em segundos. Arraste as alças sobre uma forma ao vivo, digite valores exatos ou toque em uma predefinição, e o código border-radius se atualiza enquanto você trabalha.
Use o modo Simples para os cantos arredondados do dia a dia em botões, cards e campos, ou mude para o modo Avançado e tenha a sintaxe completa de 8 valores com barra, que cria blobs orgânicos, ovos, gotas e outras formas livres. Ele foi feito tanto para quem programa e quer valores exatos quanto para quem desenha e explora formas decorativas.
Como usar
Defina cada canto
No modo Simples, use os controles deslizantes ou os campos numéricos para Superior esquerdo, Superior direito, Inferior direito e Inferior esquerdo. Mantenha Travar tudo ativo para mover todos os cantos juntos, ou destrave para moldar cada canto individualmente.
Arraste na prévia
Pegue as alças direto na forma ao vivo para arredondar os cantos no olho. A prévia, as alças e o código CSS se atualizam na hora enquanto você arrasta.
Vá para o avançado ou escolha uma predefinição
Mude para o modo Avançado e tenha raio horizontal e vertical separado por canto, com a sintaxe H1 H2 H3 H4 / V1 V2 V3 V4, ou abra Predefinições para aplicar uma forma pronta. Clique em Forma aleatória para um blob instantâneo.
Copie o CSS
A declaração border-radius gerada aparece sempre abaixo da prévia. Clique em Copiar CSS para enviá-la à área de transferência e colar direto na sua folha de estilos.
Recursos
Modos Simples e Avançado
O modo Simples oferece os 4 controles de canto para o arredondamento padrão; o Avançado libera a sintaxe completa de 8 valores, com raio horizontal e vertical independente por canto.
Alças visuais para arrastar
As alças ficam direto sobre a forma — 4 nos cantos no modo Simples e 8 pelas bordas, com linhas-guia, no modo Avançado.
Unidades em px e %
Alterne entre px e % a qualquer momento. Seus valores atuais são convertidos automaticamente, então a forma se mantém consistente.
Travar todos os cantos
Trave para aplicar um valor aos quatro cantos de uma vez, ou destrave para ajustar cada canto com precisão de forma independente.
12 predefinições prontas
Um clique aplica Arredondado, Pílula, Círculo, Folha, Ingresso, Gota, Ovo, Blob 1–3, Selo ou Balão — cada uma mostrada como uma miniprévia da forma.
Formas aleatórias
A forma aleatória muda para o modo Avançado e gera um novo blob orgânico a cada clique.
Prévia ajustável
Redimensione a largura e a altura da prévia de 100px a 500px para ver como seu raio fica em diferentes tamanhos de elemento.
Seletores de cor
Defina as cores da forma e do fundo para visualizar os cantos contra as cores que você realmente usa.
Calculadora de raio aninhado
Informe um raio externo e o padding para obter o raio interno correto de um elemento filho, com uma prévia visual do aninhamento.
CSS instantâneo e cópia
O CSS se atualiza em tempo real, usa a notação abreviada com a sintaxe de barra quando preciso e é copiado para a área de transferência em um clique.
Perguntas frequentes
Como fazer cantos arredondados em CSS?
Aplique a propriedade border-radius, por exemplo border-radius: 12px;. Com este gerador você define cada canto de forma visual e copia a declaração exata, então não precisa adivinhar valores nem decorar a ordem dos cantos.
O que significam os quatro valores de border-radius?
Quando você passa quatro valores, eles se aplicam em sentido horário a partir do canto superior esquerdo: Superior esquerdo, Superior direito, Inferior direito, Inferior esquerdo. Os controles do modo Simples são rotulados com esses cantos exatos, então o valor que você muda corresponde ao canto que você vê.
Como fazer um círculo perfeito com border-radius?
Coloque todos os cantos em 50% em um elemento quadrado. A predefinição Círculo já faz isso para você — basta manter a largura e a altura da prévia iguais para ter um círculo de verdade, e não uma elipse.
Como arredondar só os cantos de cima?
Desative Travar tudo e aumente apenas o Superior esquerdo e o Superior direito, deixando os cantos de baixo em 0. O resultado fica algo como border-radius: 16px 16px 0 0;, ideal para abas e cabeçalhos de card.
O que é a sintaxe de barra no border-radius?
A sintaxe completa é border-radius: H1 H2 H3 H4 / V1 V2 V3 V4. Os valores antes da barra definem o raio horizontal de cada canto e os que vêm depois definem o raio vertical. Quando eles diferem, os cantos ficam elípticos, e é assim que se criam os blobs orgânicos. Mude para o modo Avançado para editar esses oito valores.
Devo usar px ou % no border-radius?
Use px em elementos de tamanho fixo, como botões e ícones, quando quiser um canto exato. Use % em elementos responsivos e formas orgânicas — 50% em um quadrado vira um círculo. O seletor de unidade converte seus valores atuais quando você troca.
Para que serve a Calculadora de raio aninhado?
Quando um filho arredondado fica dentro de um pai arredondado com padding, o raio interno deve ser menor para parecer certo. A fórmula é interno = max(0, externo − padding). Informe o raio externo e o padding, e a calculadora retorna o raio interno correto com uma prévia visual — por exemplo, um pai de 16px com 8px de padding resulta em um raio interno de 8px.
Posso usar o CSS gerado em qualquer framework?
Sim. A saída é CSS puro e baseado em padrões, que funciona em todos os navegadores modernos. Cole em uma folha de estilos, em um estilo inline ou em uma solução CSS-in-JS sem nenhuma alteração.
Ainda não há comentários. Seja o primeiro a comentar!