border-radius fluido CSS clamp
Assim como o tamanho da fonte, o raio de borda pode crescer com a viewport em vez de saltar em degraus fixos entre breakpoints. A técnica usa a mesma função `clamp()` da tipografia fluida, só que aplicada a `border-radius`: um valor mínimo em telas estreitas, um valor máximo em telas largas e uma expressão linear em `vw` entre os dois extremos. O resultado são cantos que acompanham a largura da tela sem nenhuma media query.
Cantos discretos em mobile que ganham um pouco mais de suavidade em telas largas, sem trocar de valor em degraus.
Card mantém a mesma sensação de arredondamento proporcional em qualquer largura de tela.
Badges pequenos ficam quase retangulares em mobile e mais arredondados em desktop, acompanhando o espaço disponível.
É a propriedade que arredonda os cantos de um elemento. Aceita valores em px, %, rem ou qualquer unidade CSS, e pode controlar os quatro cantos de forma independente. Na notação elíptica, cada canto ainda pode ter raios horizontal e vertical separados, chegando a até oito valores.
Sim, e faz sentido usar os dois juntos. Se o texto cresce suavemente com a tela, o raio dos elementos que envolvem esse texto (botões, cards, inputs) também deve crescer, senão os cantos ficam desproporcionais em relação ao conteúdo em telas grandes.
Sim, cada par mínimo/máximo gera um slope e um intercept diferentes. Não existe uma fórmula genérica que sirva para qualquer par de valores, o cálculo depende diretamente dos quatro números de entrada: raio mínimo, raio máximo, viewport mínimo e viewport máximo.
`clamp()` tem suporte amplo desde 2020 em todos os navegadores principais. Em um navegador sem suporte, a declaração inteira é ignorada e o `border-radius` anterior na cascata (ou o padrão do navegador) prevalece, então vale sempre incluir um fallback fixo em px antes da linha com `clamp()`.
border-radius: 12px;O CSS é gerado localmente no navegador.