Gerador Border Radius CSS Grátis: Cantos Arredondados Visual
32 usos20px
20px
20px
20px
Dicas Border Radius
Cantos individuais
Ajuste cada canto separadamente ou vincule para raio uniforme.
Vincular cantos
Ative para mudar todos juntos.
Código CSS
border-radius gerado corretamente.
Perguntas Frequentes
Como arredondar cantos?
border-radius: Xpx; para iguais, ou border-radius: TL TR BR BL; individual.
Como fazer círculo?
border-radius: 50% em elemento quadrado.
Cantos diferentes?
Sim, cada canto tem seu valor.
O que faz o botão 'desvincular'?
Clicar no botão 'desvincular' desconecta os controles individuais de cada canto. Isso significa que você pode ajustar o raio de um canto sem afetar os outros. Você verá os quatro campos de entrada se tornarem independentes. É útil para criar designs assimétricos.
Posso usar valores percentuais em vez de pixels?
Sim, você pode alternar entre pixels e porcentagens no gerador. As porcentagens são relativas às dimensões do elemento, não ao raio em si. Um valor de 50% em uma caixa de 200px de largura cria um raio de 100px nos cantos. Isso é crucial para layouts responsivos onde o tamanho do elemento muda. Use porcentagens quando seu design precisar escalar suavemente entre diferentes telas.
Como Usar
- Ajuste raio de cada canto
- Vincule/desvincule cantos
- Preview em tempo real
- Copie CSS