Conditional Border Radius in CSS

Conditional Border Radius in CSS ishadeed.com10 months ago in #Dev Love68

Some time in the past, I used to be examining house web page feed to be told and notice how they construct issues out. I’m at all times curious to look how folks write CSS. I spotted an excessively, very fascinating border-radius worth for the cardboard part in the primary feed. I shared the next tweet about this little discovery. Then, I won this answer from Miriam Suzanne: is it at all times 8px? That math seems like a toggle to me, the place at a definite level ((100vw – 4px) – 100%) may well be destructive, toggling 9999 to -9999? Which would turn the price to 0? Basically: if we’re inside 4px of the entire viewport measurement, take away the border radius. After a couple of hours, Frank Yan from Facebook (Yay!) showed that it is a conditional commentary to turn 8px to 0px when the cardboard is taking the entire viewport width. Isn’t that simply wonderful? At first, I believed that it is a roughly computer virus or one thing that was once achieved by means of mistake. Thankfully, I used to be incorrect. In this text, I will be able to attempt to spotlight the issue, and provide an explanation for how the answers paintings. The drawback We have a card part with a border-radius of 8px. When the cardboard doesn’t have margin or is taking the entire viewport width, we need to turn the border-radius to 0. This can also be achieved by means of casting off the border-radius with a CSS media question like this. @media (min-width: 700px) { .card { border-radius: 8px; } } In some instances, this is restricting. If for some explanation why we need to turn on the border-radius when the viewport measurement is lower than 450px, we can want to create a variation CSS elegance and use media question once more. @media (max-width: 450px) { .card–rounded { border-radius: 8px; } } The resolution This is a suave person who was once achieved by means of the staff Facebook. It mimics the next good judgment: if (cardWidth = viewportWidth) { radius = 0; } else { radius = 8px; } To put in force that good judgment in CSS, we want to evaluate between two values by means of the use of CSS comparability purposes. If you don’t know them, I like to recommend studying this text by means of yours really. The resolution is encouraged by means of the object The Flexbox Holy Albatross by means of Heydon Pickering. It was once tailored by means of Naman Goel from Facebook to paintings with border-radius. .card { border-radius: max(0px, min(8px, calc((100vw – 4px – 100%) * 9999))); } Let’s stroll throughout the above CSS in element. We have a max() serve as that compares between 0px and the computed worth of the min(). It will pick out the bigger worth. The min() serve as compares between 8px and a computed worth from calc((100vw – 4px – 100%) * 9999). This will consequence with an excessively massive sure or destructive quantity. The 9999 is a huge quantity to drive the price to be both 0px or 8px. Let’s provide an explanation for the calc() magic! The magic occurs in the 100% worth. It can also be other according to two other eventualities: It can also be equivalent to 100% of its containing part (The mother or father/wrapper.. or no matter it’s referred to as in your CSS). Or, it may be equivalent to the 100vw, in case the cardboard is taking the entire viewport width (E.g: in cell). Why to make…

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply