Conditional Border Radius In CSS

No Comments

Ahmad Shadeed paperwork a bonafide CSS trick from the Fb CSS codebase. The concept is that when a component is the complete width of the viewport, it doesn’t have any border-radius. However in any other case, it has 8px of border-radius. Right here’s the code:

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

One line! Tremendous neat. The center of it’s the comparability between 100vw and 100%. Primarily, the border-radius comes out to 8px more often than not. But when the part turns into the identical width because the viewport (inside 4px, however I’d say that half is non-compulsory), then the worth of the border-radius turns into 0px, as a result of the equation yields a detrimental (invalid) quantity.

The 9999 multiplication signifies 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 part dimension:

CodePen Embed Fallback

Why do it like this fairly than at a @media question? Frank, the developer behind the Fb selection, says:

It’s not a media question, which compares the viewport to a set width. It’s successfully a sort of container question that compares the viewport to its personal variable width.

Frank Yan


This can be a extra basic goal resolution because it doesn’t have to know the scale of the cardboard. A media question could be depending on the width of the cardboard.

Naman Goel

The approach is seemingly known as the “Fab 4” Method which is helpful in emails.

Direct Hyperlink to ArticlePermalink

The put up Conditional Border Radius In CSS appeared first on CSS-Methods. You may assist 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