Show HN: Apple-like smooth corners for Tailwind CSS
github.comI 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.
Especially weird since CSS actually has the clip-path property which allows polygons as masks. I think converting a curve to a polygon is still better than having a literal raster image as a mask.
> I already knew about the whole “mathematically perfect corners” thing Apple does
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.
It's pretty subtle, but hard to unsee after using it a lot.
diff: https://github.com/user-attachments/assets/3edb0bbd-4989-442...
PNG masks to achieve this effect is definitely a cure that is worse than the disease.
Looks like the derivative of the angle is continuous.
When you drive around a street corner in a car, you start by turning the wheel to turn a little, then more, then less, then you drive straight again. This looks like that kind of curve.
Some links on this with regards to roads/tracks:
https://en.wikipedia.org/wiki/Jerk_(physics)#In_the_geometri...
It's subtle. Zoom to the middle of the sample image and compare (the vertical part of) the curve of the two top corners. You will notice like... 5 pixels of difference, then the curve gets aliased in the smooth version. I would like to see it in an actual site though.
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?