border-radius and a brief history of UX trends

Anyone who's used the internet at all in the past 5 years has consciously or subconsciously noticed that the corners of ui elements in your favourite apps have been getting more and more rounded.

It's no secret why designers do this; smooth, rounded elements look more friendly and inviting. God forbid anyone hurt themselves on the sharp corners of your div. But while in the past, rounded corners were used with care to indicate certain aspects of the page's intended flow, in modern sites they're everywhere. This is partly because of the standardization of the border-radius property in browsers, and moreso because people get bored of the current UI trends every few years. And now it's nearly impossible to find a website that doesn't splatter the property everywhere.

Even perfectly good designs were later on given the border-radius treatment, almost as an afterthought. So if it took no effort to implement, it should be just as easy to reverse, right?

why css is annoying

I started with this simple css rule:

* {
  border-radius: 0;
}

And nothing changed. The priority of css selectors is determined by their "specificity", and *, which will select everything, is obviously the least specific. The !important directive overrides this, so I tried border-radius: 0 !important; next. I'm using the browser extension Stylus to see changes instantly.

It works! Except for these buttons on github:

The ::before and ::after pseudo-selectors aren't included in * apparently, so I needed to add them

*,
*::after,
*::before {
    border-radius: 0 !important
}

But some elements still aren't affected by the css. While it's bad practice, a lot of sites will stll use !important themselves, and that puts us back to the start. We need to somehow make a selector that's more "specific" than any other selector, while also targetting every single element on the page.

I first thought to use :not(), with a sequence of classes that would never be reached, but that did not add enough specificity to reach everything. If the page includes something like:

#post-container .post > .post-content div > *{
  border-radius: 10px !important;
}

Then we need to be a lot more specific. And stacking :not() doesn't provide any extra specificity. Eventually I landed on attribute selectors (input[type=text]), which do stack. I could use a common attribute like class, and spam it to get enough priority, like *[class][class][class][class][class][class][class][class].

But this didn't work in some cases, since not everything has the class attribute. Fortunately, we can go back to :not() here! I eventually ended up with this:

*::before:not([a][b][c][d][e][f][g][h][i][j][k][l][h][i][j][j][l][m][n][o][p]),
*::after:not([a][b][c][d][e][f][g][h][i][j][k][l][h][i][j][j][l][m][n][o][p]),
*:hover:not([a][b][c][d][e][f][g][h][i][j][k][l][h][i][j][j][l][m][n][o][p]),
*:not([a][b][c][d][e][f][g][h][i][j][k][l][h][i][j][j][l][m][n][o][p]) {
    border-radius: 0 !important;
}

And it works in most cases! Except for the fact that sometimes, rounding is done via svg masks, which would probably have to be modified on a case-by-case basis. But for now, I just added mask: unset !important to the selector, and it mostly worked