Show HN: Apple-like smooth corners for Tailwind CSS

by instagaryon 1/25/2025, 8:34 PMwith 15 comments

by Uehrekaon 1/25/2025, 9:21 PM

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.

by burgerritoon 1/25/2025, 9:26 PM

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!

by silverwindon 1/26/2025, 12:34 AM

Why don't browsers default to this?

by _aleph2c_on 1/25/2025, 9:30 PM

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

by weswilsonon 1/25/2025, 10:03 PM

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.

by phoronixrlyon 1/25/2025, 9:30 PM

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