1. O Que E Border-Radius
A propriedade CSS border-radius define o arredondamento dos cantos de um elemento. E uma das propriedades mais usadas no desenvolvimento frontend moderno, presente em praticamente todos os sistemas de design — de botoes a cards, avatares e modais.
Ela aceita valores em px, %, em, rem e outras unidades CSS. O valor 50% em um elemento quadrado cria um circulo perfeito, enquanto valores menores criam cantos suavemente arredondados.
2. Sintaxe Completa e Eixos X/Y
A sintaxe basica aceita de 1 a 4 valores para controlar cada canto individualmente. A sintaxe avancada com barra (/) permite controle independente do raio horizontal (X) e vertical (Y) de cada canto:
- 1 valor: todos os cantos iguais —
border-radius: 8px - 2 valores: canto superior-esquerdo/inferior-direito e superior-direito/inferior-esquerdo
- 4 valores: tl tr br bl (sentido horario a partir do superior esquerdo)
- Com barra: raios X separados dos Y —
border-radius: 10px 20px / 5px 15px
"O editor gera automaticamente a sintaxe com barra quando os eixos X e Y diferem, garantindo que voce sempre obtenha o CSS correto e preciso."
3. Casos de Uso Comuns
O border-radius aparece em inumeros elementos de interface:
- Botoes: tipicamente entre 4px e 8px para aparencia moderna, ou 9999px para o estilo pilula.
- Cards e paineis: valores entre 8px e 16px criam separacao visual suave.
- Avatares: 50% transforma qualquer quadrado em circulo.
- Inputs e campos de formulario: 4px a 8px adiciona suavidade sem parecer exagerado.
- Tooltips e baloes: formas assimetricas com eixos X/Y diferentes criam efeitos de balao de fala.
4. Quando Usar Cada Preset
Nosso editor oferece 8 presets cuidadosamente escolhidos para os casos mais comuns:
- Nenhum: para elementos com cantos exatamente quadrados.
- Pequeno/Medio/Grande: progressao de suavidade para UI geral.
- Pilula: valor maximo para botoes e tags com estilo arredondado completo.
- Folha: dois cantos opostos arredondados, criando forma de folha ou ponta de seta.
- Ameba/Blobby: formas organicas assimertricas populares em ilustracoes e elementos decorativos.
5. Performance e Boas Praticas
Border-radius nao tem impacto significativo em performance por si so, mas alguns cuidados valem a pena:
- Evite aplicar border-radius em elementos que sofrem muitas animacoes simultaneas junto com box-shadow — a combinacao pode acionar repaint.
- Para animacoes suaves, prefira transicionar com
transform: scale()em vez de alterar border-radius dinamicamente. - Use variaveis CSS para manter consistencia:
--radius-md: 8pxe aplique em todo o sistema de design.
6. Perguntas Frequentes
O que sao os eixos X e Y do border-radius?
Cada canto de um elemento tem dois raios: o horizontal (X) que controla a curvatura na direcao horizontal, e o vertical (Y) que controla a curvatura vertical. Quando X e Y sao iguais, o canto forma um arco de circulo. Quando diferem, o canto forma um arco eliptico.
Qual e o valor maximo util de border-radius?
Para um elemento de 300x220px como o da preview, valores acima de 110px (metade da menor dimensao) nao causam mais mudanca visual aparente — o browser limita automaticamente o raio ao maximo geometricamente possivel para nao sobrepor os cantos.
Posso usar border-radius com clip-path?
Sim, mas eles funcionam de forma independente. clip-path recorta o elemento em formas arbitrarias, enquanto border-radius apenas arredonda os cantos. Para formas complexas, clip-path e mais flexivel; para arredondamento padrao de UI, border-radius e mais simples e tem melhor suporte.