I already knew about the whole “mathematically perfect corners” thing Apple does, so I was super curious how someone implemented that in CSS. I figured it was some sort of new CSS feature involving splines, but then I saw there was a folder called “masks” containing PNG files at 3 resolutions and I was immediately transported back to the mid-2000s.

Not an Apple product user so TIL Apple's rounded corner are different than usual rounded corner using CSS. I'm going to guess this is using CSS's clip-path!

Why don't browsers default to this?

Is this a joke, I can't see a difference.

Obligatory video on splines: https://www.youtube.com/watch?v=jvPPXbo87ds

From what I've read, Apple rounded corners are using G^2 or G^3 geometric continuity to generate smoother curves.

It's hard to tell which smoothing function this library uses since it looks like it's based on PNG masking.

Cool hack, can I see it in action anywhere, OP?