Other Looks at the Conditional Border Radius Trick

Remember when Ahmad Shadeed wrote about that border-radius “toggle” he found in Facebook’s CSS? It was interesting! I covered it. A few weeks after that surge of linkage, a couple of articles came out digging into it a little deeper.

In “Evaluating Clever CSS Solutions,” Michelle Barker wonders how clever is too clever?

While undoubtedly clever, and super interesting to read about, I side with Robin Rendle in the CSS-Tricks newsletter when he says:

I can’t help but feel that it’s a little too smart.

I have to agree here. Tricks like this have their place, and Facebook (which can clearly afford to hire the best of the best CSS developers) might be one of them. But speaking personally, when forced to pick between a trick like this and an ever-so-slightly less optimal but far more readable solution (say, a media query), in 99% of cases I’d plump for the latter.

Michelle is aware that a media query isn’t the same solution here. A non-clever solution would be a container query. I agree as well. I almost never opt for tricky solutions in production, as even if they seem to work, I worry about the long term maintenance and sometimes even the fragility of the solution.

Stefan Judis looked at how we might pull of the same “conditional border-radius” idea only using the upcoming container queries syntax.

/* If the container's width is equal to or greater than the viewport width, remove the border-radius */
@container (width >= 100vw) { .conditional-border-radius { border-radius: 0; }
}

That’s pretty darn clear to me. Stefan also mentions that if we could use the theoretically upcoming @when feature, it could be even clearer:

@when container(width >= 100vw) { .conditional-border-radius { border-radius: 0; }
}
@else { .conditional-border-radius { border-radius: 1em; }
}

That is a big maybe, as there is no evidence these brand new specs will overlap like this. I hope they do though. CSS has gotten much more logical and readable over the years and this would keep that train moving.

Oh, and I mentioned this in the last article…

The 9999 multiplication means that you’ll never get low-positive numbers. It’s a toggle. You’ll either get 8px or 0px and nothing in between. Try removing that part, resizing the screen, and seeing it sorta morph as the viewport becomes close to the component size

But I regretted not putting a video in there to make the concept clearer, so I’ll rectify that here.