Applying a conditional border-radius in CSS (without media queries)

DanielOctober 12, 2021

Starting from a curiosity seen on the Facebook CSS Ahmad Shadeed wrote a great article explaining how to change the border-radius without using any media queries at all.

The magic CSS formula is:

border-radius: max(0px, min(8px, calc((100vw - 4px - 100%)
    * 9999)));

Basically, it uses the min() and max() functions combined with the calc() function to conditionally set a border radius of 0px or 8px.

While it is a super cool study case of what we can do these days with functions in CSS, I find it to be a bit hard to read. A bit too smart maybe :). For sure it's a very elegant technical solution, and could be also a cool trick to impress colleagues, but if possible I would choose a more readable solution.

By the way, another function that could be used to change elements based on the size is the minmax function.