Different Appears to be like on the Conditional Border Radius Trick

No Comments

Keep in mind when Ahmad Shadeed wrote about that border-radius “toggle” he present in Fb’s CSS? It was fascinating! I coated it. A couple of weeks after that surge of linkage, a few articles got here out digging into it a bit deeper.

In “Evaluating Intelligent CSS Options,” Michelle Barker wonders how intelligent is too intelligent?

Whereas undoubtedly intelligent, and tremendous fascinating to examine, I facet with Robin Rendle within the CSS-Methods e-newsletter when he says:

I can’t assist however really feel that it’s a bit too sensible.

I’ve to agree right here. Methods like this have their place, and Fb (which might clearly afford to rent the very best of the very best CSS builders) is likely to be one in all them. However talking personally, when compelled to choose between a trick like this and an ever-so-slightly much less optimum however way more readable answer (say, a media question), in 99% of instances I’d plump for the latter.

Michelle is conscious {that a} media question isn’t the identical answer right here. A non-clever answer can be a container question. I agree as properly. I virtually by no means go for tough options in manufacturing, as even when they appear to work, I fear about the long run upkeep and generally even the fragility of the answer.

Stefan Judis checked out how we’d pull of the identical “conditional border-radius” thought solely utilizing the upcoming container queries syntax.

/* If the container’s width is the same as or higher than
the viewport width, take away the border-radius */
@container (width >= 100vw) {
.conditional-border-radius {
border-radius: 0;

That’s fairly darn clear to me. Stefan additionally mentions that if we might use the theoretically upcoming @when function, it might be even clearer:

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

That could be a massive possibly, as there is no such thing as a proof these model new specs will overlap like this. I hope they do although. CSS has gotten far more logical and readable through the years and this is able to maintain that prepare shifting.

Oh, and I discussed this within the final article

The 9999 multiplication implies that you’ll by no means get low-positive numbers. It’s a toggle. You’ll both get 8px or 0px and nothing in between. Attempt eradicating that half, resizing the display, and seeing it sorta morph because the viewport turns into near the element measurement

However I regretted not placing a video in there to make the idea clearer, so I’ll rectify that right here.

The put up Different Appears to be like on the Conditional Border Radius Trick appeared first on CSS-Methods. You may help CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment