Gerador de Border Radius

Arrasta os controlos para arredondar cada canto da caixa de pré-visualização e copia o CSS border-radius resultante. Bloqueia os quatro cantos juntos para um retângulo arredondado simples, ou desbloqueia-os para criar formas de pílula, folha e manchas assimétricas.

O que é esta ferramenta?

border-radius é a propriedade CSS que arredonda os cantos de um elemento. Escrita à mão, exige quatro valores numa ordem fixa — superior esquerdo, superior direito, inferior direito, inferior esquerdo — uma ordem fácil de trocar, especialmente quando os quatro cantos são diferentes.

Esta ferramenta elimina as suposições: move um controlo, observa o canto a arredondar-se na pré-visualização em tempo real e lê o CSS exato na caixa de código gerada. Um único interruptor de bloqueio alterna entre um raio uniforme (os quatro cantos iguais, o caso mais comum) e quatro controlos independentes para formas orgânicas e assimétricas.

Por que usar?

A pré-visualização atualiza-se instantaneamente enquanto arrastas — sem editar CSS nem recarregar para ver o resultado.
Bloqueio com um clique para o caso comum de 'mesmo raio em todos os cantos'; desbloqueia para botões em pílula, balões de fala e formas orgânicas.
Gera a forma abreviada de valor único quando todos os cantos coincidem, ou a forma completa de quatro valores quando não coincidem — pronto a copiar e colar em ambos os casos.
Funciona inteiramente no seu navegador. Nada do que você insere é enviado para lado nenhum.
Grátis, sem registo, funciona em celular.

Como usar

Deixa 'bloquear os 4 cantos' marcado e arrasta qualquer controlo para definir um raio uniforme em toda a caixa.
Desmarca o bloqueio para controlar cada canto de forma independente — útil para pílulas, gotas e cartões assimétricos.
Observa a caixa de pré-visualização a atualizar-se em tempo real à medida que ajustas cada controlo.
Copia o CSS gerado da caixa de código e cola-o na sua folha de estilos.

Exemplo

Entrada

Superior esq.: 40px, Superior dir.: 8px, Inferior dir.: 40px, Inferior esq.: 8px

Resultado

border-radius: 40px 8px 40px 8px;

Cantos opostos desiguais como este criam uma silhueta de folha ou pétala — um efeito comum em cartões e emblemas.

px ou % — qual a unidade a usar?

Este gerador produz valores em píxeis, a escolha certa por padrão para a maioria do trabalho de interface: botões, cartões e campos onde queres um raio fixo e previsível independentemente do tamanho do elemento.

As porcentagens comportam-se de forma diferente — são relativas à própria largura e altura do elemento, pelo que um raio de 50% num elemento quadrado produz um círculo perfeito, e num elemento não quadrado produz uma elipse. Se quiseres esse efeito (avatares, formas orgânicas que escalam com o contentor), pega no CSS gerado e troca os valores px por um valor % à mão — por exemplo, border-radius: 50% transforma qualquer caixa quadrada num círculo.

Padrões comuns de border-radius

Cartão arredondado: todos os cantos iguais, cerca de 8–16px para componentes de interface.
Botão em pílula: define o raio como metade da altura do elemento (ou usa simplesmente 9999px, que fixa uma pílula completa independentemente da altura).
Avatar circular: border-radius: 50% num elemento quadrado (largura e altura iguais).
Balão de fala: três cantos arredondados, um canto reto — coloca três controlos altos e um a 0.
Forma de folha/pétala: cantos opostos iguais, cantos adjacentes diferentes — por exemplo, superior esquerdo e inferior direito grandes, superior direito e inferior esquerdo pequenos.

Combinar com uma sombra

Os cantos arredondados raramente aparecem sozinhos — cartões e botões costumam também precisar de alguma sombra para dar profundidade. Usa o Gerador de Box Shadow para ajustar uma sombra e aplica os dois trechos de CSS gerados ao mesmo elemento.

→ Gerador de Box Shadow · Conversor de Unidades

Perguntas frequentes

Qual é a ordem dos cantos em border-radius?

A forma abreviada do CSS segue sempre a ordem superior esquerdo, superior direito, inferior direito, inferior esquerdo, no sentido horário a partir do canto superior esquerdo. Os quatro controlos desta ferramenta estão etiquetados nessa mesma ordem, por isso nunca precisa decorá-la.

Posso usar unidades diferentes para cada canto?

Sim, em CSS real podes misturar px, %, em e rem entre cantos, embora seja raro na prática. Esta ferramenta gera valores px uniformes por simplicidade — troca qualquer valor individual para % ou outra unidade diretamente na sua folha de estilos se precisares de unidades mistas.

Porque é que border-radius: 50% às vezes cria uma oval em vez de um círculo?

Porque as porcentagens são relativas a cada eixo de forma independente — o raio horizontal é uma porcentagem da largura do elemento, o raio vertical uma porcentagem da sua altura. Num elemento quadrado (largura e altura iguais) isso produz um círculo perfeito; num retângulo, uma elipse.

O border-radius também funciona em imagens de fundo e contornos?

Sim — o border-radius recorta o fundo, o contorno e (em navegadores modernos) o box-shadow do elemento na forma arredondada. Não recorta conteúdo filho que transborde, a menos que também apliques overflow: hidden ao elemento pai.

Existe um limite para o tamanho do raio?

Não há um limite rígido — se o raio ultrapassar metade da largura ou altura do elemento, os navegadores limitam-no para que as duas curvas desse lado se encontrem exatamente no meio, que é como um quadrado se torna um círculo perfeito ou uma pílula.