# Calculadora de raios aninhados

> Calcule o raio de dentro a partir do raio de fora, do padding e da borda, para cantos concêntricos.

URL: https://dpw.dev/ferramentas/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.

Esta página tem uma calculadora interativa no navegador. Exemplo: 24px de raio e 8px de padding dão 16px por dentro:

```css
.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.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/border-radius)).

## Conceitos Fundamentais de CSS

Borda, padding e conteúdo são camadas da mesma caixa, e o `border-radius` só curva a de fora. O livro explica o modelo de caixa em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml