Ajuste o raio de cada canto individualmente, elíptico, uniforme ou blob, com CSS copiável.
Na forma mais simples, border-radius aplica o mesmo raio em todos os quatro cantos. Mas a especificação permite controlar cada canto individualmente e até definir raios horizontal e vertical separados por barra, criando formas elípticas. Com isso é possível construir desde cards com cantos levemente arredondados até shapes orgânicos tipo blob. O valor 50% é o modo mais conhecido, ele transforma qualquer elemento quadrado em círculo perfeito e um retângulo em elipse. A notação de quatro valores no shorthand segue a ordem horária: topo-esquerda, topo-direita, baixo-direita, baixo-esquerda, igual ao box-model em geral. Esta ferramenta mostra o preview em tempo real, colapsa a saída para a forma mais curta possível e deixa você copiar a declaração pronta.
Na forma curta, border-radius aceita de um a quatro valores no sentido horário: topo-esquerda, topo-direita, baixo-direita, baixo-esquerda. Com um valor, todos os cantos ficam iguais; com dois, o primeiro vale para topo-esquerda e baixo-direita e o segundo para o outro par; com quatro, cada canto tem o seu. Esta ferramenta colapsa automaticamente para a forma mais curta possível, se os quatro cantos forem iguais, ela escreve apenas um número.
A forma completa usa a barra para separar raios horizontal e vertical: border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, totalizando até oito valores. Antes da barra vão os raios horizontais de cada canto; depois da barra, os verticais. Quando horizontal e vertical diferem, o canto vira um arco elíptico em vez de circular, é justamente o que permite as formas orgânicas.
Um card suave: border-radius: 16px; arredonda os quatro cantos igualmente, é o preset Card. Uma pílula (botão totalmente arredondado nas pontas) usa um valor bem alto, como border-radius: 9999px;, que satura na metade do lado mais curto e cria as extremidades semicirculares independentemente da largura do botão.
Um blob orgânico usa a notação elíptica com valores alternados: border-radius: 30% 70% 30% 70% / 70% 30% 70% 30%; dá a cada canto raios horizontal e vertical bem diferentes, produzindo aquela forma irregular e fluida. Trocar as porcentagens muda o formato do blob sem sair de uma única propriedade CSS.
Cantos arredondados aparecem em cards, botões, avatares, modais e balões de chat, e o mesmo valor pode ser animado com transition: border-radius para transformar uma forma na outra com morphing suave. Para recortar uma imagem ou conteúdo nos cantos, combine com overflow: hidden no container, senão o conteúdo interno vaza a borda arredondada.
A escolha da unidade muda o comportamento responsivo: px é absoluto e mantém o raio fixo em qualquer tamanho; % escala junto com o elemento, ideal para círculos e formas que precisam manter a proporção. Para avatares circulares que mudam de tamanho, 50% é mais robusto do que um px fixo.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/gerador-borda-arredondada"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Gerador de Borda Arredondada"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
É a propriedade que arredonda os cantos de um elemento. Aceita valores em px, %, rem ou qualquer unidade CSS, e pode controlar os quatro cantos de forma independente. Na notação elíptica, cada canto ainda pode ter raios horizontal e vertical separados, chegando a até oito valores.
border-radius: 12px;O CSS é gerado localmente no navegador.