Gerador de Border Radius CSS Online
Controle o arredondamento de cada canto separadamente, alterne entre px e % e ative bordas elípticas. Veja o resultado ao vivo e copie o código.
O que é border-radius?
A propriedade border-radius arredonda os cantos de um elemento. É usada para criar botões com cantos suaves, cartões, avatares circulares e formas personalizadas — sem precisar de imagens.
Sintaxe básica:
border-radius: 16px;Aplica o mesmo raio aos quatro cantos.
Controle individual dos cantos
Você pode definir cada canto separadamente. A ordem segue o sentido horário a partir do canto superior esquerdo:
border-radius: 10px 20px 30px 40px;
/* superior-esquerdo superior-direito inferior-direito inferior-esquerdo */px ou porcentagem?
| Unidade | Comportamento |
|---|---|
px | Raio fixo em pixels, independente do tamanho |
% | Raio relativo ao tamanho do elemento |
Usar border-radius: 50% em um elemento quadrado cria um círculo perfeito — ideal para avatares.
Bordas elípticas
É possível definir um raio horizontal diferente do vertical, separados por uma barra (/), criando cantos elípticos:
border-radius: 50px 20px 50px 20px / 30px 60px 30px 60px;Isso permite formas orgânicas como “blobs” decorativos.
Perguntas frequentes
Como criar um círculo perfeito?
Use um elemento quadrado (mesma largura e altura) e aplique border-radius: 50%.
Qual a diferença entre px e %?
Em px o arredondamento é fixo. Em % ele se adapta ao tamanho do elemento, mantendo a proporção.
Posso arredondar só um canto?
Sim. Defina o raio desejado para um canto e deixe os outros em zero, ou use as propriedades específicas como border-top-left-radius.
O border-radius corta o conteúdo interno?
O fundo e a borda do próprio elemento acompanham a curva, mas o conteúdo interno (imagens e elementos filhos) pode ultrapassar o canto arredondado. Para recortá-lo, combine com overflow: hidden.