Gerador de border-radius

• Pré-visualização ao vivo e CSS instantâneo: o gerador atualiza a pré-visualização ao vivo e a saída CSS a cada mudança — sem botão para pressionar. Veja exatamente como cada raio de canto afeta a forma e copie a declaração CSS em um clique.
• Controles uniformes e por canto: alterne entre o modo uniforme (um único controle deslizante para todos os cantos) e o modo por canto (valores independentes para cada canto). Escolha sua unidade — px para caixas padrão e % para formas elípticas.
• 100% privado — sem upload: toda a geração de border-radius acontece localmente no seu navegador. Suas escolhas de design nunca saem do seu dispositivo e nunca são enviadas a nenhum servidor — seguro para projetos de clientes e sistemas de design proprietários.
• Grátis e sem limites: gere estilos de border-radius ilimitados sem cadastro, sem assinatura e sem limites de uso. O gerador é totalmente grátis para sempre e sem anúncios que bloqueiem a interface.

• Design de cartões e componentes: designers de interface usam o gerador para estilizar cartões, diálogos modais, tooltips e menus suspensos. A pré-visualização visual facilita encontrar o raio de canto perfeito que combina com o sistema de design — de um sutil 4 px a um generoso 16 px.
• Entrega de design para código: designers usam o gerador para extrair valores CSS exatos dos mockups visuais e passá-los aos desenvolvedores. Chega de medir pixels ou adivinhar — copie a declaração border-radius exata e cole no código.
• Estilização de imagens e avatares: desenvolvedores web usam o gerador para estilizar avatares de perfil (circulares em 50%), imagens de produto (arredondadas em 8-12 px) e galerias de miniaturas. O modo % cria formas elípticas e circulares perfeitas para imagens de qualquer proporção.
• Design de interface de apps móveis: desenvolvedores móveis usam o gerador para estilizar formas de botões, bordas de cartões e cabeçalhos de bottom sheets. O controle por canto permite formas assimétricas que seguem padrões modernos de UI móvel, como o ícone squircle no estilo iOS.
• Aprendizado e experimentação de CSS: desenvolvedores frontend que estão aprendendo CSS usam o gerador para entender visualmente como o border-radius funciona. A pré-visualização ao vivo e os controles por canto permitem ver como cada valor afeta a forma final — uma ferramenta perfeita para aprender CSS.
• Estilização de botões e campos de formulário: desenvolvedores de UX usam o gerador para estilizar botões, campos de entrada, barras de busca e controles de formulário. Igualar o border-radius entre elementos de formulário relacionados cria consistência visual e uma experiência refinada.

A propriedade CSS border-radius arredonda os cantos da borda externa de um elemento. Você pode definir um único raio para os quatro cantos (usando um valor único como border-radius: 8px), dois valores para pares diagonais (8px 16px), ou quatro valores para cada canto individualmente (8px 4px 8px 4px). A ordem é superior esquerdo, superior direito, inferior direito, inferior esquerdo — no sentido horário a partir do topo. Nosso gerador de border-radius lida com todos esses formatos e produz CSS limpo e pronto para produção.

1. Escolha seu modo de entrada: use o modo Uniforme para controlar os quatro cantos com um único controle deslizante — perfeito para um arredondamento consistente. Alterne para o modo Por canto para definir cada canto de forma independente com campos numéricos individuais dispostos em uma grade 2×2 que espelha o layout do elemento.
2. Ajuste os valores e a unidade: arraste o controle deslizante ou digite os valores diretamente. Alterne entre px (pixels para arredondamento de tamanho fixo) e % (porcentagem para formas elípticas/circulares). A pré-visualização é atualizada na hora, mostrando os valores exatos do raio de cada canto sobrepostos no quadro de pré-visualização.
3. Copie o CSS: clique em «Copiar CSS» para copiar a declaração CSS pronta para produção para a área de transferência. O gerador produz o formato abreviado ideal — um valor, dois valores ou quatro valores, dependendo da configuração dos seus cantos.

• px (pixels): arredondamento de tamanho fixo que não muda quando o elemento é redimensionado. Use px para componentes de interface padrão como botões, cartões e modais, onde você quer um arredondamento consistente independentemente do tamanho do elemento. Os valores normalmente vão de 2 px (sutil) a 24 px (bem arredondado).
• % (porcentagem): arredondamento relativo que escala com o tamanho do elemento. Use 50% para criar um círculo perfeito ou uma forma de pílula. Use porcentagens menores para um arredondamento elíptico que se adapta a diferentes dimensões. Valores percentuais são limitados a 50% para formas circulares.

A propriedade border-radius é compatível com todos os navegadores modernos sem prefixos de fornecedor. Também suporta as variantes de propriedades lógicas border-start-start-radius e similares para compatibilidade com RTL e modos de escrita vertical. Para elementos circulares, use 50%; para botões tipo pílula, use um valor maior que a altura do elemento (ex.: 9999px), que limita ao raio máximo possível.