Show HN: Apple-like smooth corners for Tailwind CSS

  • 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?