This content originally appeared on Bram.us and was authored by Bramus!
Ahmad Shadeed recently spotted this CSS declaration in the Facebook CSS Source:
.card {
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));
}It’s a really interesting piece of code, which acts as a toggle to only show rounded corners in case the element is not fullwidth.
We don’t want rounded corners when the window is narrow enough for the cards to span the entire viewport, so we use the “Fab Four” technique to collapse the border-radius to zero conditionally. https://t.co/QrGkjmVInE
— Frank Yan (@frankyan) October 3, 2021
You can see it in action in this (resizable) demo:
See the Pen
Border radius / FB by Ahmad Shadeed (@shadeed)
on CodePen.
On his blog, Ahmad lays out the details how exactly the math works.
Conditional Border Radius In CSS →
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-10-05T08:58:08+00:00) Conditional Border Radius In CSS. Retrieved from https://www.scien.cx/2021/10/05/conditional-border-radius-in-css-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.