Border Radius

O border radius é utilizado para definir a curvatura das bordas de elementos, trazendo suavidade e modernidade ao design, além de reforçar a identidade visual do produto.

✅ Atualizado (25/02/2025) - Ver detalhes

Fevereiro

• 25/02/25

  Removido valores de 4 e 8px, alterado o small2x para 6 e smallX pra 10px

Novembro

• 25/11/24

  Criada toda documentação e definições dos novos radius e tokens para o Compasso.

Guia de Border Radius

A escala abaixo representa todas as possibilidades de customização de um border radius. É possível também aplicar apenas em laterais específicas, sendo elas canto superior direito, esquerdo, inferior direito e esquerdo.

Token	Valor
borderRadius-small2x	6px
borderRadius-smallX	10px
borderRadius-small	12px
borderRadius-base	16px
borderRadius-large	20px
borderRadius-largeX	24px
borderRadius-large2X	32px
borderRadius-large3x	40px
borderRadius-round	999px

Consistência

É importante ressaltar que a altura e largura de um elemento influenciam diretamente no border radius que será utilizado. É necessário realizar ajustes em casos que a proporção entre largura e a altura do elemento foge muito das recomendações estabelecidas.

Regra do radius ideal

Radius interno + distância = radius externo.

Nem sempre o radius ideal será o mesmo que a nossa lista de recomendações (4, 8, 12, 16, 20, 24, 32, 40 ou 999), mas quando necessário usar essa regra, escolha o radius - dentro das recomendações - que seja o mais próximo ao resultado da soma.