When Clever CSS Crosses the Line

The border-radius trick that surfaced from Facebook's CSS a while back — where multiplying by 9999 turns a radius into a binary toggle between 8px and 0px — sparked a good deal of discussion. The technique itself is undeniably clever, but it also prompted a follow-up question worth asking: how clever should production CSS be?

Michelle Barker explored that tension in "Evaluating Clever CSS Solutions." Her take lands on the side of caution. The trick is fascinating to dissect and certainly has a place in projects with heavy engineering resources like Facebook, but when you weigh it against a plain media query, readability wins almost every time. As she points out, the slight sacrifice in elegance is worth the clarity.

That said, a media query is not a strictly equivalent substitute. In container-query territory, the comparison gets closer. Stefan Judis took at look at how container queries could recreate the same conditional radius effect, perhaps with far less head-scratching:

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

The logic there is almost painfully clear compared with the multiplication toggle. Judis pushed the thought experiment further by considering the speculative @when rule, which could make the intent even more explicit:

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

It is worth a heavy dose of skepticism about whether these newer specs will line up quite like that. There is no guarantee yet, but the direction CSS has taken — more logical, more readable — suggests that kind of overlap is worth hoping for.

On the maintenance front, the argument against such tricks is not that they fail today, but that long-term support becomes a guessing game. A future developer might look at 9999 and reasonably wonder what the numbers are even doing. A query, by contrast, states its behavior right there in the name.

The original write-up noted how removing the multiplication factor changes everything: the radius morphs as the viewport nears component boundaries instead of toggling cleanly. A short demonstration makes that difference unmistakable: