Gerador de Border Radius CSS
Esta ferramenta processa os dados localmente no seu navegador.
O que é Border Radius?
border-radius é uma propriedade CSS que permite arredondar os cantos de qualquer elemento HTML. Introduzida no CSS3, ela eliminou a necessidade de imagens para criar cantos arredondados — uma técnica muito comum nos anos 2000.
Sintaxe da propriedade
A propriedade aceita de 1 a 4 valores, seguindo a ordem: top-left , top-right , bottom-right e bottom-left . Com 1 valor, todos os cantos são iguais. Com 2, o primeiro aplica a top-left/bottom-right e o segundo a top-right/bottom-left.
Border-radius elíptico
Usando a barra ( / ) na sintaxe, é possível definir raios horizontais e verticais separados para cada canto. Isso cria curvas elípticas em vez de circulares, permitindo formas orgânicas e criativas como gotas, folhas e blobs.
Usos comuns
- Botões arredondados — border-radius entre 8px e 12px para cantos suaves
- Avatares circulares — border-radius: 50% em elementos quadrados
- Cards — border-radius entre 12px e 24px para visual moderno
- Badges e tags — border-radius: 9999px para formato de pílula
- Formas decorativas — combinações elípticas para blobs e ondas
Perguntas Frequentes
border-radius é uma propriedade CSS que define o arredondamento dos cantos de um elemento. Aceita valores em px, %, em e outras unidades. Pode ser aplicada a todos os cantos igualmente ou a cada canto individualmente.
O border-radius elíptico usa a sintaxe com barra (/) para definir raios horizontais e verticais separados. Por exemplo, border-radius: 50px 30px / 20px 40px define raios horizontais de 50px e 30px, e verticais de 20px e 40px, criando curvas elípticas em vez de circulares.
Valores em px definem um raio fixo independente do tamanho do elemento. Valores em % são relativos às dimensões do elemento — 50% em um quadrado cria um círculo perfeito. Para elementos retangulares, % calcula separadamente sobre largura e altura.
Para criar um círculo perfeito, o elemento deve ser quadrado (mesma largura e altura) e ter border-radius: 50%. Alternativa: border-radius: 9999px funciona mesmo sem saber as dimensões exatas, pois o navegador limita o raio automaticamente.
Sim. Existem 4 propriedades individuais: border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius. A propriedade shorthand border-radius também aceita 4 valores na ordem: top-left, top-right, bottom-right, bottom-left.
Não. Esta ferramenta funciona 100% no seu navegador. Nenhum dado é enviado para servidores externos. Todos os cálculos e a geração do código CSS são feitos localmente.
border-radius é suportado por todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e Opera. Não é necessário usar prefixos de vendor (-webkit-, -moz-) desde 2012.