Saltar para o conteúdo principal
LibraTool logoLibraTool

Gerador de raio de borda CSS grátis

Projete visualmente cantos arredondados com controle independente sobre cada canto. Suporta a sintaxe elíptica X/Y para formas de blob orgânicas.

Funciona offline depois de carregado
border-radius: 20px 20px 20px 20px;
Unidade

Usos comuns

  • Formas de Mancha OrgânicaUse a sintaxe elíptica X/Y para criar formas de mancha únicas para seções hero e ilustrações.
  • Cantos de Cartão e ContêinerCantos arredondados padrão para cartões, contêineres e painéis em design de UI moderno.
  • Formas de Avatar e Foto de PerfilCrie o estilo de canto correto para fotos de perfil: circular, squircle ou quadrado arredondado.
  • Pílulas, Tags e InsigniasConstrua botões pill perfeitamente arredondados, tags e insignias com a predefinição 9999.
  • Designs de Canto AssimétricoMisture raios entre cantos para criar formas de cartão e botão distintas e reconhecíveis pela marca.

Como funciona

O gerador de border-radius funciona inteiramente no navegador — não há servidor, biblioteca, ou envio. Constrói a string do valor CSS border-radius diretamente em JavaScript usando estado do React e useMemo, depois aplica-a como estilo inline num elemento div ao vivo para que o próprio motor CSS do navegador renderize a forma em tempo real.

  1. 1
    Os controlos escrevem estado
    Cada entrada de intervalo escreve para uma de oito variáveis de estado numéricas — quatro raios de canto horizontais e quatro verticais para o modo elíptico. O modo unificado colapsa todos os oito num único controlo via um auxiliar setAll que sincroniza cada valor de uma vez.
  2. 2
    O useMemo monta o valor CSS
    Um hook useMemo recalcula a string border-radius sempre que qualquer valor de canto, unidade (px ou %), ou alternador elíptico muda. No modo padrão produz a forma abreviada de quatro valores; com o elíptico ativado, adiciona o separador de barra para a sintaxe completa de oito valores — por exemplo, 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    O motor CSS do navegador renderiza a pré-visualização
    A string calculada é definida como um estilo inline borderRadius num elemento div simples. O motor de layout do navegador faz toda a renderização — não há canvas, SVG, ou código de desenho de terceiros.
  4. 4
    A Clipboard API copia a saída
    Clicar em Copiar chama navigator.clipboard.writeText com a declaração CSS (border-radius: ...;) ou a classe de valor arbitrário Tailwind equivalente (rounded-[...]), dependendo do alternador de formato selecionado.

Ferramentas relacionadas

🎨

Gerador de sombra de caixa CSS

Construtor visual para CSS box-shadow com visualização ao vivo, empilhamento multicamadas, seletor de cores, alternância de inserção e cópia com um clique. Inclui predefinições de material, neumorfismo e brilho.

Experimentar
🟦

Gerador de CSS Grid

Projete visualmente um CSS grid — faixas, unidades e lacunas — e copie o CSS e HTML gerados.

Experimentar
↔️

Gerador de CSS Flexbox

Experimente a direção flex, ajuste, justify e align em itens ao vivo — e copie o CSS.

Experimentar

Perguntas frequentes