The CSS infinity keyword, and what it lets you delete

You have been writing border-radius: 9999px to fake a pill. It works. But you picked the number, and the box is now lying to the browser about how round it wants to be. There is a name for the number you actually meant. Adam Argyle spent a post on nerdy.dev on July 25, 2026 walking through it — the CSS infinity keyword.

The keyword, and the calc() around it

infinity is a number, not a unit. You cannot write border-radius: infinity. You wrap it in calc() and multiply by the unit you want:

border-radius: calc(infinity * 1px);

That is the pill. The engine resolves it to the largest length the system will produce, and the corner clamps to half the shorter side of the box. No magic string. No arbitrary 9999. Every pattern in Argyle's post rides the same trick: pin a value to as much as the algorithm allows by multiplying infinity (or -infinity) by a unit.

The recipes

Freeze on the last frame of an animation by giving its duration an effectively unlimited length:

animation-duration: calc(infinity * 1s);

Force-to-the-top stacking without picking a random z-index:

z-index: calc(infinity);

An unbounded clamp() window, when the value only needs a constraint on one side:

inline-size: clamp(calc(-infinity * 1px), 100%, calc(infinity * 1px));

A backdrop that fills the viewport without you measuring it:

box-shadow: 0 0 0 calc(infinity * 1px) #0005;

The boolean pattern

The move that pays for the whole post is the boolean. You want a corner radius that stays 20px until the container gets narrow, then collapses to zero. Not a media query. Not a switch(). Just a clamp whose middle term is a comparison multiplied by infinity:

border-radius: clamp(0px, (100cqi - 100%) * infinity, 20px);

When 100cqi is bigger than 100%, the middle term is a huge positive length and clamp picks the 20px cap. When it flips negative, the middle is a huge negative length and clamp picks the 0px floor. A comparison turned into a step function. No JavaScript, no query.

Same shape with sibling-count():

--solo: clamp(0, (2 - sibling-count()) * infinity, 1);

Zero when the element has two or more siblings, one otherwise. A boolean written in the cascade.

Where the mechanism actually lives

None of this is a new property. It is one keyword and the fact that calc() and clamp() will let you push a very large finite proxy through their arithmetic. The interesting move is not that there is an infinity. It is that CSS math functions are now expressive enough to encode both an upper bound and a boolean as ordinary values. The rest is style.

Argyle embeds a baseline-status component next to the recipes so you can check where the pieces stand in the browsers you support. Check it before you ship sibling-count() or a scroll-driven trigger range next to a pill radius, because those primitives arrived later than calc() did.

Try one on your next layout

Pick the pill. Delete the 9999. Write calc(infinity * 1px) and mean it. Next time you reach for a media query to zero out a radius on a narrow card, try the clamp trick instead. The box will decide for itself, and you can leave the answer in one property.