Gerador de border-radius CSS

Recursos de Gerador de border-radius CSS

• 01

  Modos uniforme e por-canto

  O modo uniforme aplica um raio a cada canto. O modo por-canto controla canto superior-esquerdo, superior-direito, inferior-direito e inferior-esquerdo independentemente — formas de pílula, folha e etiqueta assimétrica estão a alguns cliques de distância.

• 02

  Cantos elípticos (X/Y)

  Alterne modo elíptico para especificar um raio horizontal e vertical por canto — a sintaxe que CSS suporta para formas de blob orgânicas.

• 03

  Três unidades

  Alterne entre px, % e rem. Valores percentuais criam verdadeiras elipses que dimensionam com a caixa; valores rem rastreiam o tamanho da fonte raiz para acessibilidade.

Perguntas frequentes sobre Gerador de border-radius CSS

Qual é a diferença entre px e %?

Raios de pixel são absolutos — um canto de 16px é sempre 16px. Raios percentuais são relativos à largura e altura do elemento, portanto 50% cria um círculo perfeito em uma caixa quadrada e uma elipse em um retângulo.

Quando devo usar modo elíptico?

Use modo elíptico quando desejar um canto que protrua mais em um eixo — por exemplo uma pílula horizontal (50%/100%) ou uma forma de blob em forma de folha. CSS expressa isso como `canto-superior-esquerdo-x canto-superior-direito-x ... / canto-superior-esquerdo-y canto-superior-direito-y ...`.

Por que meu raio percentual se vê errado em uma caixa que não é quadrada?

Porcentuais em border-radius são relativos ao lado correspondente: porcentuais horizontais para largura, vertical para altura. Em uma caixa larga e curta, isso significa que os cantos se estendem em elipses, não arcos perfeitos.

A saída funciona em todos os navegadores?

Sim — border-radius e a sintaxe elíptica são suportados em todos os navegadores modernos, incluindo todas as versões evergreen de Safari, Firefox, Edge e Chrome.