Conditional border-radius and three future CSS features
Tags: css
Published: 2021-10-15 11:44:34

---
title: Conditional border-radius and three future CSS features
published: true
description: A look at CSS features from the future: media query ranges, container queries and @when/@else.
tags: css
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxcyt5x7795jkn91xle8.png
canonical_url: https://www.stefanjudis.com/blog/conditional-border-radius-and-three-future-css-features/
---

Ahmad Shadeed's post [Conditional Border Radius In CSS](https://ishadeed.com/article/conditional-border-radius/) is a wonderful example of CSS trickery that explains a fairly cryptic CSS snippet found on facebook.com.

```css
.conditional-border-radius {
   border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));
}
```

This snippet is quite hefty CSS, and if you want to learn how it works first, [head over to read Ahmad's post](https://ishadeed.com/article/conditional-border-radius/). It's a good hack, but it is also unreadable. Even if you understand this `border-radius` declaration today, you have to write a lengthy comment so that your future self won't travel back in time to have a word with you.

If you describe the CSS' functionality in JavaScript, that's how it would look like.

```javascript
if (cardWidth >= viewportWidth) {
  radius = 0;
} else {
  radius = 8px;
}
```

That's reasonable logic! It's readable and easy to understand. Can we have something like that in CSS? Maybe in the future?

**The CSS code below is far away from being cross-browser supported, the specs are still edited, and it is not ready for production!**

## Media query ranges

Let's start with a common media query and make our way from there.

```css
@media (min-width: 600px) {
  .contitional-border-radius {
    border-radius: 1em;
  }
}
```

[The pretty new media query range context](https://www.w3.org/TR/mediaqueries-4/#mq-range-context) make things less verbose and more readable.

```css
@media(width >= 600px) {
  /* ... */ 
}

@media (400px < width < 1000px) {
  /* ... */
}
```

I'm a big fan of this syntax. Unfortunately, at the time of writing, [only Firefox supports media query ranges](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#browser_compatibility).

![Browser support for media query ranges showing that it's only supported in Firefox.](//images.contentful.com/f20lfrunubsq/2E5SoHxqwpl79kygGi6VCC/748d6e7f126b8970b6989756666b4a7e/Screen_Shot_2021-10-14_at_19.30.45.png)

On the bright side: you can use media query ranges today [when PostCSS is embedded in your toolchain](https://preset-env.cssdb.org/features#media-query-ranges).

With media query ranges at our hands, what's next?

## Container queries

Let's bring in the new hotness – container queries. Container queries allow you to style a container's children depending on its width. I'm not going into the great technical details here, but you can find plenty of resources by googling container queries. Many people are writing about it right now.

Here's the syntax:

```css
@container (width > 600px) {
  .conditional-border-radius {
    border-radius: 1em;
  }
}
```

And we're one step closer! `width` defines the query container's content box width and [according to the spec](https://drafts.csswg.org/css-contain-3/#width) it can be compared to [relative length units](https://drafts.csswg.org/css-values-4/#relative-lengths) which include viewport units. Let's flip things around bring in the viewport width!

```css
/* If the containers width is equal or greater than 
   the viewport width, remove the border-radius */
@container (width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}
```

This CSS looks excellent, but it's also future music due to the current browser support. [Container queries are pretty much a Chromium thing right now](https://caniuse.com/css-container-queries), they're in active development and [only supported by toggling a feature flag](chrome://flags/#enable-container-queries).

![caniuse.com table for Container queries which shows only Chromium support behind a flag.](//images.contentful.com/f20lfrunubsq/75x0x77qAB5rMnRY8ZKft4/008a1f568a653649b021396ac421dc74/Screen_Shot_2021-10-14_at_19.43.04.png)

Unfortunately, it doesn't look like Chromium's experimental container query implementation supports viewport units yet (or am I using them wrong?). I created two CodePens to test things out. [The one using pixel units works fine](https://codepen.io/stefanjudis/pen/PoKoQEY), whereas [a container query using viewport units always matches](https://codepen.io/stefanjudis/pen/zYdvRZr).

![Example showing that viewport units in container queries don't seem to work.](//images.contentful.com/f20lfrunubsq/5dOaFtt94zlr1lb32kHn91/9283a5a4395574edee6d93fbd70d209a/Screen_Shot_2021-10-14_at_20.34.10.png)
 
But could we come even closer to a readable CSS snippet as we're looking at future implementations anyway?

## The CSS @when proposal

[Chris Coyier recently shared a very new CSS conditionals proposal](https://css-tricks.com/proposal-for-css-when/). `@when` and `@else` are ready for spec work and adoption. 🎉

```css
@when container(width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}
@else {
  .conditional-border-radius {
    border-radius: 1em;
  }
}
```

There's not much to say about `@when` because no browser implements it, and it might take a while until we can use it. [The spec doesn't mention `@container` yet](https://tabatkins.github.io/specs/css-when-else/), but it's logical to me to include container queries, too.

## Summary

At least theoretically, we arrived at a few readable CSS lines that render something depending on viewport and(!) container width.

```css
@when container(width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}
@else {
  .conditional-border-radius {
    border-radius: 1em;
  }
}
```

In case you want to have a look, here are the specs again:

- [Media query ranges](https://www.w3.org/TR/mediaqueries-4/#mq-range-context)
- [CSS Containment](https://drafts.csswg.org/css-contain-3/)
- [CSS When/Else Rules](https://tabatkins.github.io/specs/css-when-else/)

It's fantastic to see how CSS evolves, and I can't wait until browsers implement all this greatness. The future is bright, friends!