Gerador de CSS border-radius
Crie cantos arredondados em CSS (border-radius) com pré-visualização ao vivo e código pronto para copiar.
🔒 100 % no cliente — nenhum dado enviado
Gerador de CSS border-radius para criar cantos arredondados com pré-visualização ao vivo e código pronto para copiar. Ajuste cada canto de forma independente ou todos de uma vez, depois copie a propriedade CSS exata. Tudo roda no seu navegador: nenhum dado ou imagem é enviado a um servidor.
FAQ
Como arredondo um único canto em CSS?
Use uma propriedade específica, como border-top-left-radius: 12px;, para arredondar apenas um canto. A ferramenta permite configurar cada canto separadamente e gera a linha correspondente.
Como faço um círculo ou oval com border-radius?
Aplique border-radius: 50% a um elemento quadrado para um círculo perfeito, ou a um retângulo para uma elipse. Selecione a unidade % na ferramenta para obter esse resultado.
Qual é a diferença entre px, % e em para border-radius?
Pixels dão um raio fixo, porcentagens são relativas ao tamanho do elemento (ideal para círculos), e em depende do tamanho da fonte. Você pode testar cada unidade na pré-visualização.
O código gerado funciona em todos os navegadores?
Sim, border-radius é suportado por todos os navegadores modernos sem nenhum prefixo. Basta copiar a propriedade para sua folha de estilos.