Gerador de Border Radius CSS

Gere border-radius CSS visualmente com preview ao vivo, controles por canto, opção de unificar os cantos e unidades em px ou porcentagem.


  

  

    
    
  



    

    

      
Arredonde os cantos de qualquer elemento de forma visual com este gerador gratuito de border-radius CSS. Mova um controle para todos os quatro cantos de uma vez ou desvincule-os para arredondar cada canto separadamente, alterne entre pixels e porcentagem e acompanhe o preview ao vivo se atualizar na hora. Quando ficar do seu agrado, copie uma regra border-radius limpa — tudo roda no seu navegador, sem instalar nada.

      

        
O que é um gerador de border-radius CSS?

        
Um gerador de border-radius CSS é uma ferramenta visual que monta a propriedade border-radius para você. Em vez de adivinhar valores, você arrasta os controles de cada canto e acompanha um preview ao vivo, depois copia o CSS exato do border-radius para colar na sua folha de estilos. Ele usa a forma curta de um único valor quando todos os cantos são iguais e escreve o atalho de quatro valores quando eles diferem.

        
      

      

        
Como gerar um border-radius

        
Mantenha os cantos unificados para um arredondamento uniforme ou desvincule para moldar cada canto separadamente. Escolha pixels ou porcentagem e copie a regra gerada quando o preview estiver do seu agrado.

        
  1. Deixe Unificar todos os cantos ativado para arredondar todos por igual.
  2. Arraste o controle de um canto para definir o raio e ver o preview se atualizar.
  3. Desvincule os cantos para arredondar cada um separadamente.
  4. Alterne a unidade entre px e % para mudar como o raio se ajusta.
  5. Clique em Copiar CSS para pegar a regra border-radius pronta para usar.

      

      

        
Por que usar este gerador de border-radius?

        
  • Preview ao vivo atualizado instantaneamente a cada ajuste de canto.
  • Unifique todos os cantos para um raio uniforme ou desvincule para controle total.
  • Alterne entre unidades px e % com um clique.
  • Gera a forma curta quando os cantos coincidem e o atalho quando diferem.
  • Um clique copia uma regra border-radius limpa e pronta para colar.
  • 100% gratuito e privado — tudo roda no seu navegador.

      

      

        
Perguntas frequentes

        

          
Em que ordem ficam os quatro valores do border-radius?

          
O atalho de quatro valores lista os cantos no sentido horário começando pelo superior esquerdo: border-radius: superior-esquerdo superior-direito inferior-direito inferior-esquerdo. Quando os quatro são iguais, você pode usar um único valor, como border-radius: 12px.

        

        

          
Devo usar px ou porcentagem no border-radius?

          
Pixels dão um raio de canto fixo, que permanece o mesmo independentemente do tamanho do elemento. A porcentagem é relativa às dimensões do elemento, então 50% em um quadrado o transforma em um círculo e é ótima para arredondamentos fluidos e responsivos.

        

        

          
Como faço um círculo perfeito ou formato de pílula?

          
Defina border-radius como 50% em um elemento com largura e altura iguais para obter um círculo. Para um formato de pílula ou cápsula em um elemento mais largo, use um valor grande como 9999px para que os lados curtos fiquem totalmente arredondados.

        

        

          
Posso arredondar apenas alguns cantos?

          
Sim. Desative Unificar todos os cantos e defina cada canto separadamente. Um canto com raio 0 permanece quadrado, então você pode arredondar apenas os cantos superiores de um card, por exemplo.