O raio da borda controla o arredondamento dos cantos dos elementos. Diferentes valores de raio criam diferentes sensações de design: desde nítido e profissional até suave e amigável.
Ajuste cada canto de forma independente usando os controles deslizantes. A visualização é atualizada em tempo real. Copie o código CSS do seu projeto.
Frequently Asked Questions
Q: Posso definir raios diferentes para cada canto?
Posso definir raios diferentes para cada canto? Sim, use o formato: border-radius: superior esquerdo superior direito inferior direito inferior esquerdo.
Q: Qual é o melhor raio de borda para um cartão?
Qual é o melhor raio de borda para um cartão? 12-16px é o ponto ideal para cartões na maioria dos designs modernos.
Q: Quais valores de raio de borda devo usar para diferentes elementos?
Quais valores de raio de borda devo usar para diferentes elementos? Os cartões normalmente usam 8-16px, botões 4-8px, modais 12-20px e avatares 50% para círculos. Use valores maiores em elementos maiores para obter consistência proporcional.
Q: Como faço para criar um botão em forma de pílula?
Como faço para criar um botão em forma de pílula? Defina o raio da borda para um valor muito grande, como 999px. O navegador irá limitá-lo na metade da altura do elemento, criando automaticamente um formato de pílula, independentemente do tamanho do botão.
Q: Posso aplicar raios diferentes a cada canto?
Posso aplicar raios diferentes a cada canto? Sim, os quatro controles de canto individuais permitem definir valores exclusivos para canto superior esquerdo, canto superior direito, canto inferior direito e canto inferior esquerdo. Isto é útil para elementos de design direcionais.