O que é o Gerador de CSS Border Radius?
O Gerador de CSS Border Radius é uma ferramenta visual que permite criar formas personalizadas de border-radius arrastando alças diretamente em uma visualização ao vivo. Em vez de adivinhar valores CSS, você vê a forma mudar em tempo real conforme a ajusta.
A ferramenta suporta tanto o modo Simples (4 valores de canto) para cantos arredondados padrão quanto o modo Avançado (sintaxe de 8 valores com horizontal/vertical por canto) para criar formas blob orgânicas, ovos, gotas e outras formas criativas.
Para quem é isso?
Desenvolvedores Web
Designers
Entusiastas de CSS
Como Usar
Uso Básico (Modo Simples)
Ajuste os Valores dos Cantos
Use os controles deslizantes ou digite valores nas entradas numéricas para definir o raio de cada canto (Superior Esquerdo, Superior Direito, Inferior Direito, Inferior Esquerdo).
Bloqueie ou Desbloqueie os Cantos
Alterne Bloquear Tudo para fazer todos os cantos mudarem juntos, ou desbloqueie para ajustar cada canto independentemente para formas assimétricas.
Arraste as Alças
A visualização da forma é atualizada instantaneamente — você também pode arrastar as alças diretamente na forma para edição visual intuitiva.
Copie o Código CSS
Copie o código CSS gerado com o botão Copiar CSS e cole-o diretamente em sua folha de estilos.
Criando Formas Orgânicas (Modo Avançado)
Mude para o Modo Avançado
Mude para o modo Avançado para acessar 8 valores — cada canto recebe controles de raio horizontal (H) e vertical (V) separados.
Use a Sintaxe de Barra
Isso ativa a sintaxe de barra CSS: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 para cantos elípticos e formas orgânicas.
Ajuste Fino com 8 Alças
Arraste as 8 alças ao longo das bordas da forma, ou use controles deslizantes para controle preciso sobre valores de raio horizontal e vertical.
Gere Formas Aleatórias
Clique em Aleatório para gerar formas blob interessantes instantaneamente — perfeito para exploração criativa e designs únicos.
Usando Predefinições
Clique no botão Predefinições para revelar 12 formas integradas incluindo Arredondado, Pílula, Círculo, Folha, Gota, Ovo e vários estilos Blob. Clicar em uma predefinição aplica automaticamente seus valores e muda para o modo apropriado.
Calculadora de Raio Aninhado
Ao colocar um elemento filho arredondado dentro de um pai arredondado com preenchimento, o raio interno deve ser calculado como: inner = max(0, outer - padding). Abra a seção Calculadora de Raio Aninhado, insira o raio externo e o preenchimento, e a ferramenta calcula o raio interno correto com uma visualização visual.
Raios Desalinhados
- Os cantos internos não se alinham com os externos
- Lacunas visuais desajeitadas
- Aparência não profissional
Alinhamento Perfeito
- Raio interno matematicamente correto
- Curvas suaves e consistentes
- Aparência profissional e polida
Recursos
Dois Modos de Edição
O modo Simples oferece 4 controles deslizantes para cantos arredondados padrão. O modo Avançado expõe a sintaxe completa de CSS border-radius de 8 valores, permitindo definir raio horizontal e vertical independentes por canto para formas blob orgânicas.
Alças de Arrasto Visual
As alças de arrasto são colocadas diretamente na visualização da forma. No modo Simples, 4 alças ficam nos cantos. No modo Avançado, 8 alças aparecem ao longo das bordas com linhas de guia mostrando a direção do raio.
Alternância de Unidade (px / %)
Alterne entre unidades de pixel e porcentagem. Os valores são convertidos automaticamente quando você alterna, para que sua forma permaneça consistente em diferentes sistemas de unidades.
Bloquear Todos os Cantos
Quando bloqueado, ajustar qualquer canto aplica o mesmo valor a todos os quatro cantos para arredondamento uniforme. Desbloqueie para controle individual e designs assimétricos.
12 Predefinições Integradas
Aplique rapidamente formas comuns: Arredondado, Pílula, Círculo, Folha, Ingresso, Gota, Ovo, Blob (3 variantes), Distintivo e Mensagem. Cada predefinição mostra uma visualização de forma em miniatura para seleção fácil.
Aleatório
Gere formas orgânicas aleatórias com um clique. A ferramenta muda automaticamente para o modo Avançado e cria formas blob únicas perfeitas para projetos criativos.
Visualização Personalizável
Ajuste as dimensões da visualização (largura e altura de 100px a 500px) para testar como seu border-radius fica em diferentes tamanhos de elemento. Altere a cor da forma e a cor de fundo com seletores de cor integrados.
Calculadora de Raio Aninhado
Um utilitário recolhível que calcula o border-radius interno correto quando um elemento filho fica dentro de um pai arredondado com preenchimento. Insira o raio externo e o preenchimento para obter o raio interno matematicamente correto, com uma visualização visual.
Saída CSS Instantânea
O código CSS gerado é atualizado em tempo real e pode ser copiado para sua área de transferência com um clique. A saída usa notação abreviada e inclui a sintaxe de barra quando valores horizontais e verticais diferem.
Perguntas Frequentes
Qual é a diferença entre o modo Simples e Avançado?
O modo Simples usa o border-radius padrão de 4 valores (um valor por canto) — perfeito para botões, cards e elementos de UI padrão com cantos arredondados circulares.
O modo Avançado usa a sintaxe CSS de 8 valores onde cada canto tem raio horizontal e vertical separados, permitindo formas blob orgânicas, cantos elípticos e formas criativas que não são possíveis com 4 valores.
O que significa a barra (/) no border-radius?
A propriedade CSS border-radius suporta uma sintaxe de barra: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4.
Os valores antes da barra controlam o raio horizontal, e os valores após controlam o raio vertical. Quando esses diferem, os cantos se tornam elípticos em vez de circulares, criando formas orgânicas como ovos, gotas e blobs.
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% cria uma forma semelhante a um ovo com curvatura horizontal e vertical diferentes.Devo usar px ou % para border-radius?
A escolha depende do seu caso de uso:
- Use px para elementos de tamanho fixo como botões e ícones onde você quer controle exato e arredondamento consistente independentemente do tamanho do elemento
- Use % para elementos responsivos ou ao criar formas blob/orgânicas — 50% em um quadrado cria um círculo perfeito, e valores percentuais escalam proporcionalmente com as dimensões do elemento
Para que serve a Calculadora de Raio Aninhado?
Quando você tem um elemento pai arredondado com preenchimento, o filho interno precisa de um border-radius menor para parecer correto e manter harmonia visual.
A fórmula é: inner radius = max(0, outer radius - padding)
Exemplo: Um card com border-radius de 16px e preenchimento de 8px precisa de um raio interno de 8px na sua área de conteúdo. Sem esse cálculo, os cantos internos não se alinharão adequadamente com a curva externa, criando uma lacuna visual desajeitada.
Posso usar o CSS gerado em qualquer framework?
Sim. A saída é CSS padrão que funciona em todos os navegadores modernos e é compatível com qualquer framework ou ambiente de desenvolvimento.
Você pode colar diretamente em:
- Folhas de estilos CSS padrão (arquivos .css)
- Estilos inline em HTML
- Soluções CSS-in-JS (styled-components, Emotion, etc.)
- Módulos CSS
- Valores arbitrários do Tailwind CSS
- Qualquer pré-processador (SCSS, LESS, Stylus)
O código gerado usa propriedades CSS padrão com excelente suporte de navegador (IE9+, todos os navegadores modernos).
Ainda não há comentários. Seja o primeiro a comentar!