Gerador de border radius
Defina cada canto e copie o CSS.
- Executa no seu navegador — seu texto nunca é enviado a lugar nenhum
- Sem cadastro, sem cotas, grátis para usar quantas vezes quiser
Como funciona
O border-radius é simples até você querer três cantos arredondados e um reto, e aí todo mundo precisa consultar a ordem dos quatro valores.
A ordem, de uma vez por todas
Superior esquerdo, superior direito, inferior direito, inferior esquerdo — no sentido horário, a partir do canto superior esquerdo. A mesma ordem, horária a partir do canto superior esquerdo, vale também para as abreviações de margin, padding e border, o que vale a pena memorizar de uma vez.
Pixels ou porcentagem
Pixels dão a mesma curva qualquer que seja o tamanho do elemento. As porcentagens são relativas à largura e à altura do próprio elemento, então a curva acompanha a escala — e um raio de 50% em um quadrado resulta em um círculo perfeito, que é o truque padrão para avatares redondos.
O formato de pílula
Um raio maior que a metade da altura do elemento é limitado a exatamente a metade, e é por isso que border-radius: 999px produz uma pílula de forma confiável, qualquer que seja a altura. É mais robusto do que calcular o valor certo, porque continua funcionando quando o conteúdo muda.
Quando os cantos parecem errados em elementos aninhados
Uma caixa arredondada dentro de outra caixa arredondada precisa de um raio menor na interna, reduzido pelo padding entre elas, ou as curvas não ficarão concêntricas. É um detalhe pequeno que faz os cards parecerem bem-feitos.
Gerador de border radius — perguntas
Em que ordem estão os quatro valores?
Superior esquerdo, superior direito, inferior direito, inferior esquerdo — no sentido horário, a partir do canto superior esquerdo.
Como faço um círculo perfeito?
border-radius: 50% em um elemento exatamente quadrado.
Como faço um botão em formato de pílula?
Use um valor grande, como 999px. Os navegadores o limitam à metade da altura, então funciona em qualquer tamanho.
Devo usar pixels ou porcentagem?
Pixels para uma curva consistente; porcentagem quando você quer que ela acompanhe a escala do elemento.
Funciona em todo lugar?
Sim. O border-radius é compatível, sem prefixo, há bem mais de uma década.