Categoria: Desenvolvimento
Gerador de border-radius CSS
Arredonde canto a canto, com prévia ao vivo
Ajuste um controle por canto e copie a declaração border-radius. Ative os cantos elípticos para a sintaxe com barra que cria formas orgânicas.
border-radius: 12px;
A prévia é um elemento real com o valor aplicado, então você vê exatamente o que o navegador desenha.
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
border-radius parece um número só até que três cantos precisem ser diferentes, e aí a forma abreviada engana: os quatro valores correm no sentido horário a partir do superior esquerdo, e a variante com barra dá a cada canto um raio horizontal antes da barra e um vertical depois. É essa segunda forma que desenha as silhuetas suaves e assimétricas que parecem orgânicas em vez de uma caixa arredondada. Aqui há um controle por canto, um elemento real com o valor aplicado em vez de uma imagem, e a saída é contraída como uma pessoa escreveria: quatro cantos iguais viram um único valor.
Como usar
- Escolha a unidade e desvincule os cantos se quiser valores diferentes.
- Ajuste cada canto até a prévia ficar como você quer.
- Ative os cantos elípticos para formas orgânicas e copie a declaração.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- O que significa a barra no valor?
- Tudo antes da barra é o raio horizontal de cada canto e tudo depois é o vertical. Valores diferentes de cada lado formam uma elipse em vez de um quarto de círculo.
- Porcentagem ou pixels?
- Pixels mantêm a mesma curva em qualquer tamanho, que é o que botões e cartões geralmente querem. Porcentagens escalam com o elemento: 50 por cento em um quadrado vira um círculo.
- Por que a saída tem menos de quatro valores?
- O CSS contrai cantos repetidos, e esta ferramenta também: quatro cantos iguais viram um valor e uma diagonal igual vira dois. O resultado é idêntico, só que menor.