Gerador de Border Radius CSS - Ferramenta online gratuita

Funcionalidades

Controlo dos quatro cantos

Modo unificado ou independente

Deslizador e introdução numérica

Pré-visualização em direto e código CSS

Como Usar

1. Arraste o controle de raio — o cartão neutro mostra os cantos em tamanho real.

2. Mude para “Por canto” para ajustar cada canto separadamente.

3. Copie o CSS — ele usa a forma válida mais curta.

Sobre esta ferramenta

Cantos arredondados são uma linha de CSS, mas acertar o valor é mais fácil quando você consegue vê-lo. Este gerador mostra o border-radius num card neutro em tamanho real enquanto você arrasta um único controle deslizante ou modela cada canto separadamente. Depois ele escreve a declaração válida mais curta: um valor quando todos os cantos são iguais, e dois, três ou quatro valores quando diferem, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. Raios pequenos, de 4–8px, combinam com botões e campos; 12–24px deixam cards com cara amigável; valores muito grandes transformam elementos baixos em pílulas. Troque o fundo do palco para ver como a forma fica sobre superfícies claras e escuras antes de copiar o CSS para a sua folha de estilos.

Perguntas Frequentes

Em que ordem vão os quatro valores de border-radius?

No sentido horário a partir do canto superior esquerdo: superior esquerdo, superior direito, inferior direito, inferior esquerdo. Com dois valores, o primeiro vale para superior esquerdo e inferior direito, e o segundo para superior direito e inferior esquerdo.

Como faço um botão em formato de pílula ou um círculo?

Para uma pílula, use um raio de pelo menos metade da altura do elemento, ou simplesmente um valor bem grande como 9999px. Para um círculo, dê ao elemento largura e altura iguais e defina border-radius como 50%.

Por que meu canto arredondado está cortado ou mostrando o fundo?

Elementos filhos podem transbordar o canto arredondado. Adicione overflow: hidden ao contêiner ou dê ao filho um raio igual, para que imagens e fundos acompanhem a curva.

Posso criar cantos elípticos?

O CSS permite raios horizontais e verticais separados por uma barra, por exemplo border-radius: 50% / 20%. Este gerador foca em cantos circulares em pixels, que cobrem a maior parte do trabalho de interface; você pode acrescentar a sintaxe com barra à mão para formas especiais.

O border-radius afeta o layout ou a área de clique?

Não. Ele só muda como o elemento é pintado e recortado. O elemento mantém sua caixa retangular no layout, e cliques nos cantos transparentes continuam sendo registrados nele.