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
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.