Gerador de raio de borda – cantos CSS online

CSS

Share X / Twitter Facebook LinkedIn WhatsApp

Como usar Gerador de raio de borda

Ajuste os cantos — juntos para arredondamento uniforme, individualmente para formas.
Assista à visualização ao vivo — a personalidade do raio é impossível de julgar pelos números.
Experimente o modo blob (diferentes raios horizontais/verticais) para formas de heróis orgânicas.
Copie o CSS — e padronize em 2 a 3 valores de raio em seu design.

O que é Gerador de raio de borda?

Um gerador de raio de borda torna o arredondamento de cantos visual: ajuste o raio de cada canto com visualização ao vivo e copie o CSS border-radius. O arredondamento uniforme é trivial (border-radius: 8px); o gerador ganha seu controle por canto (padrões 8px 24px 8px 24px) e a exótica sintaxe de barra - 30% 70% 70% 30% / 30% 30% 70% 70% - onde os raios horizontais e verticais diferem por canto, produzindo as formas orgânicas de "bolha" que decoram o pouso moderno páginas.

Radius é um tom de discagem: 0 leituras técnicas, 4–8px profissionais, 12–24px amigáveis, 9999px em formato de pílula e blobs assimétricos divertidos — poucas propriedades CSS definem a personalidade de um design diretamente.

Sobre o Gerador de raio de borda

Arraste os controles por canto, observe a atualização da forma ao vivo e copie o CSS — dos sutis 12px de um cartão para um blob completo de oito valores.

Os padrões práticos: raios consistentes em um sistema de design (escolha de 2 a 3 valores — digamos entradas de 6px, cartões de 12px, modais de 24px — e reutilize-os; raios aleatórios são considerados desleixados); o botão da pílula (raio ≥ metade da altura, convencionalmente 9999px); círculos (50% em um elemento quadrado — a receita do avatar); formas de balão e aba (três cantos redondos, um quadrado); e blobs de herói por meio da sintaxe de barra, geralmente animados entre dois conjuntos de raios para um fundo de transformação suave.

Uma observação sobre geometria: elementos arredondados aninhados parecem errados com raios iguais - o raio do elemento interno deve ser o externo menos o preenchimento entre eles (16px externo, preenchimento de 8px → 8px interno), ou os cantos brigam visivelmente.

Perguntas Frequentes

No sentido horário, a partir do canto superior esquerdo: canto superior esquerdo, canto superior direito, canto inferior direito, canto inferior esquerdo. Dois valores emparelham cantos opostos; um valor arredonda todos os quatro igualmente.

Raios horizontais/raios verticais por canto: 60% 40% 30% 70% / 50% 60% 40% 50% dá a cada canto uma elipse em vez de um círculo — a sintaxe em forma de bolha.

Círculo: raio da borda: 50% em um elemento com largura e altura iguais. Pílula: qualquer raio com pelo menos metade da altura — 9999px é a expressão, garantindo pílula de qualquer tamanho.

Raios iguais em elementos aninhados criam curvas visualmente incompatíveis. Regra: raio interno = raio externo - lacuna. Um cartão de 16px com preenchimento de 8px deseja conteúdo com raio de 8px dentro dele.

Escolha uma pequena escala e aplique-a: por ex. 4/8/16px ou 6/12/24px para entradas/cartões/modais. Os números exatos importam menos do que a consistência – raios arbitrários mistos é o que parece pouco profissional.