Calculadora de raios aninhados
Informe o raio de fora, o padding e a borda: a calculadora dá o raio de dentro que deixa os cantos concêntricos e mostra, lado a lado, a diferença para o mesmo raio repetido.
Veja
Copie o código
.card {
--padding: 8px;
--radius: 24px;
border-radius: var(--radius);
padding: var(--padding);
}
.card > .media {
/* Raio de fora menos o que fica entre as caixas: cantos concêntricos. */
border-radius: max(0px, var(--radius) - var(--padding));
}O problema
Um card arredondado com uma imagem arredondada dentro parece torto quando as duas usam o mesmo border-radius. O canto de dentro fica largo demais: o espaço entre as curvas engorda no canto e afina nas laterais.
O olho percebe que algo está errado antes de saber o quê, e o ajuste costuma ser tentativa e erro, refeito a cada padding novo.
Como funciona
Duas curvas são concêntricas quando têm o mesmo centro. Para isso, o raio de dentro desconta o que fica entre as duas caixas:
raio de dentro = raio de fora − borda − padding Com 24px de raio e 8px de padding, o de dentro é 16px. Se a conta der negativo, o canto de dentro fica reto (0).
O código deixa a conta para o CSS: max(0px, var(--radius) - var(--padding)). Assim o raio de dentro continua certo quando o token de raio ou de padding mudar, e o max() impede um valor negativo.
A regra vale para qualquer aninhamento: um botão dentro de um campo, um card dentro de um painel, um avatar dentro de um anel.
Quando usar
- Cards com imagem, vídeo ou mapa arredondado por dentro.
- Botões e selos dentro de campos de busca e pílulas.
- Componentes de design system com raio e padding vindos de tokens.
- Avatares e ícones dentro de molduras arredondadas.
Outras ferramentas
Playground de corner-shape
Teste squircle, bevel, scoop, notch e superellipse() nos cantos e leve o CSS com border-radius e corner-shape.
FormasGerador de bordas onduladas
Onda, zigue-zague, festonado, côncavo, serrilhado e ameias na borda de qualquer elemento com mask, no tamanho que você quiser.
FormasGerador de divisores de seção
Passagens em diagonal, seta, curva, onda, zigue-zague ou rasgado entre duas seções, com o encaixe da seção vizinha pronto.