Minhas ferramentas

Gerador de CSS border-radius

Arraste um controle ou escolha uma predefinição — veja a forma ao vivo e copie o CSS border-radius com um clique.

Modo
Unidade
Predefinições
Pré-visualização — quando raios adjacentes se sobrepõem, o navegador os reduz proporcionalmente, então a prévia é o resultado real.
Como usar
  1. Um cartão arredondado (16px) já está na tela — arraste o controle Raio ou troque a unidade (px / %) e tudo é atualizado ao vivo, sem botão para pressionar.
  2. Troque o modo pelos chips: “Todos os cantos” controla um único controle, “Por canto” edita os quatro cantos independentemente (SE, SD, ID, IE), “Elíptico” adiciona um raio horizontal e um vertical por canto (a sintaxe com barra).
  3. Clique em uma predefinição (Reto, Cartão arredondado, Círculo, Pílula, Folha, Blob) para carregar uma forma pronta — modo e unidade acompanham automaticamente. Copie a declaração border-radius completa com um clique.
Exemplo
Predefinição
Cartão arredondado
CSS border-radius
border-radius: 16px;
A predefinição Folha (por canto, 0 / 50% / 0 / 50%) se reduz a border-radius: 0% 50%; e a predefinição Blob gera a forma elíptica border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;. Sempre que os cantos se espelham, a forma abreviada mais curta é usada — exatamente como as regras de abreviação do CSS.
Escopo, limites e dúvidas comuns
  • Apenas border-radius: sem cantos suaves/contínuos no estilo iOS (squircle) — eles exigem clip-path ou SVG e estão fora do escopo.
  • Sem colar valores CSS existentes: todo valor vem dos controles, predefinições e chips de modo, então não há nada para interpretar mal.
  • Quando raios adjacentes somam mais que um lado, o navegador os reduz proporcionalmente. A prévia é o resultado real renderizado; a caixa de código mostra os valores que você definiu.
  • A predefinição Pílula gera 9999px — a abreviação da comunidade para “o mais arredondado possível”; o navegador o limita à metade do lado menor.
  • As porcentagens são medidas por eixo: raios horizontais em relação à largura, raios verticais em relação à altura (a prévia é quadrada, então ambos leem igual ali). Em outros tamanhos de elemento, a mesma porcentagem molda diferente.
  • Nada é salvo ou compartilhado com um parâmetro no link: recarregue e você volta ao Cartão arredondado padrão. Tudo roda no seu navegador.
Quando você precisa estilizar a caixa em si um pouco mais.
Gerador de CSS box-shadow
Gerador de CSS gradient