DevToolPal
PT

Gerador de border-radius CSS

Defina o border-radius CSS canto a canto, com cantos elípticos e formas orgânicas, em px, % ou rem, com pré-visualização ao vivo, predefinições e o CSS mais curto para copiar.

Roda localmente, nada é enviado

Cantos

Unidade

Pré-visualização

CSS

Predefinições
CSS do border-radius
 
 
 
 
 
O que faz


O gerador de border-radius permite moldar cantos arredondados visualmente e copiar o CSS mais curto. Use um raio para todos os cantos ou um para cada, ative os cantos elípticos para dar a cada canto um raio horizontal e outro vertical e veja a pré-visualização mudar enquanto arrasta. Funciona em px, %, rem ou em, e você pode colar um valor border-radius existente para editá-lo. Tudo roda no seu navegador.


Como usar


    

  1. Comece por uma predefinição ou mantenha a forma de exemplo.
    2. 

  2. Escolha a Unidade. Trocar de unidade converte os valores atuais (rem e em valem 16px; % é relativo à caixa da pré-visualização).
    3. 

  3. Ative Mesmo raio em todos os cantos para um único controle, ou desative para ajustar Superior esquerdo, Superior direito, Inferior direito e Inferior esquerdo separadamente.
    4. 

  4. Ative Cantos elípticos para ter um controle Horizontal e um Vertical por canto.
    5. 

  5. Redimensione a pré-visualização com Largura e Altura e copie o código do cartão CSS. Ative a saída longhand se preferir quatro propriedades separadas.
    6. 



Exemplo


.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }


Bom saber


    

  • Forma mais curta. A saída junta valores iguais: quatro cantos idênticos viram um só valor e a parte depois da barra é omitida quando todos os cantos são circulares.
    • 

  • Porcentagens seguem a caixa. As horizontais usam a largura do elemento e as verticais a altura, então 50% num retângulo gera uma elipse, não um círculo.
    • 

  • Raios que não cabem são reduzidos juntos pelo navegador — por isso um valor enorme em px resulta numa pílula perfeita.
    • 

  • Filhos e overflow. Cantos arredondados recortam fundo e borda, mas não o conteúdo filho: adicione overflow: hidden para recortar imagens dentro da caixa.
    • 

 
  
 
Perguntas frequentes
 
 
  › O que significa a barra no border-radius?  
Os valores antes da barra são os raios horizontais e os depois dela, os verticais. Quando diferem, o canto vira um quarto de elipse em vez de um círculo. Por exemplo, 50% / 30% gera uma curva mais achatada que 50%.
 
  › Em que ordem os quatro cantos são escritos?  
No sentido horário a partir do canto superior esquerdo: superior esquerdo, superior direito, inferior direito, inferior esquerdo. Com menos valores o CSS repete: dois valores definem superior esquerdo/inferior direito e superior direito/inferior esquerdo; três valores definem superior esquerdo, superior direito/inferior esquerdo e inferior direito.
 
  › Como faço um círculo ou uma pílula?  
border-radius: 50% transforma um quadrado em círculo e um retângulo em elipse. Para uma pílula com pontas redondas em qualquer largura, use um comprimento enorme como 9999px: o navegador reduz os raios que não cabem, então as pontas continuam perfeitamente redondas.
 
  › Como são feitas as formas orgânicas (blob)?  
Blobs usam oito porcentagens diferentes: quatro raios horizontais e quatro verticais, como 30% 70% 70% 30% / 30% 30% 70% 70%. Escolha uma predefinição de blob, ative Cantos elípticos e arraste os controles de cada canto para remodelar.