CSS Clamp

Border radius clamp() generator

Corners that stay in proportion as elements grow.

border-radius
Screen width
1152px

Actions

Clamp sizes

The smallest and largest size, for padding, margin or font size.

rem
rem

Viewport settings

The screen widths where the value starts and stops growing.

rem
rem

The clamped value will be between 0.5rem and 1.5rem, applied linearly between viewports of 24rem and 120rem.

A fluid border radius with clamp()

Cards, images and sections get much larger on a desktop than on a phone. A fixed radius that suits one size looks off at the other. The preview applies the clamp() value to the radius of a large panel, so you can find a range that looks right at every width.

From 8px to 24px between 384px and 1920px, the value is clamp(0.5rem, 0.25rem + 1.042vw, 1.5rem).

Tips

  • Keep the range small. Radius changes are easy to notice, and a 2 to 3 times range is usually plenty.
  • Use one fluid radius token for large surfaces and a fixed radius for small controls like buttons and inputs.
  • For nested elements, subtract the padding from the outer radius so the corners stay concentric.

Use it in Tailwind

Pick Tailwind v4 under the result to get a --radius-fluid token, which creates a rounded-fluid utility. The Tailwind CSS clamp() guide covers theme tokens in more detail.

Frequently asked questions

Can border-radius use clamp()?

Yes. border-radius accepts lengths, so a value like clamp(0.5rem, 0.25rem + 1.042vw, 1.5rem) works in every current browser, including for the individual corner properties.

Why make a border radius fluid?

A radius that looks right on a small card on a phone looks too sharp on a large card on a desktop, and the other way around. A fluid radius keeps the corners in proportion to the element as it grows.

How do I keep nested corners consistent?

Give the inner element the outer radius minus the padding between them: border-radius: calc(var(--radius) - var(--padding)). With fluid values for both, the nested corners stay concentric at every width. Wrap it in max(0px, …) so it never goes negative.

Should I use a percentage radius instead?

A percentage radius depends on the width and height of the element, so it turns into an ellipse on rectangles. A clamp() value keeps the corners circular while still scaling with the screen.