fluid CSS border-radius clamp
Just like font size, corner radius can grow with the viewport instead of jumping in fixed steps between breakpoints. The technique uses the same `clamp()` function as fluid typography, only applied to `border-radius`: a minimum value on narrow screens, a maximum value on wide screens, and a linear `vw` expression between the two extremes. The result is corners that track screen width without a single media query.
Subtle corners on mobile that gain a bit more softness on wide screens, without switching values in steps.
The card keeps the same proportional roundness feel at any screen width.
Small badges look almost rectangular on mobile and rounder on desktop, tracking the available space.
It's the property that rounds the corners of an element. It accepts values in px, %, rem or any CSS unit, and can control all four corners independently. In elliptical notation each corner can even have separate horizontal and vertical radii, reaching up to eight values.
Yes, and it makes sense to use both together. If text grows smoothly with the screen, the radius of the elements wrapping that text (buttons, cards, inputs) should grow too, otherwise the corners look disproportionate to the content on large screens.
Yes, each min/max pair produces a different slope and intercept. There is no generic formula that fits any pair of values, the calculation depends directly on the four input numbers: minimum radius, maximum radius, minimum viewport and maximum viewport.
`clamp()` has had broad support since 2020 across major browsers. In a browser without support, the whole declaration is ignored and the previous `border-radius` in the cascade (or the browser default) applies instead, so it is worth including a fixed px fallback before the `clamp()` line.
border-radius: 12px;CSS is generated locally in your browser.