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.
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.
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!
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.
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.
15 comments
[ 3.4 ms ] story [ 37.5 ms ] threadThis https://arun.is/blog/apple-rounded-corners ?
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.
https://en.wikipedia.org/wiki/Jerk_(physics)#In_the_geometri...
https://en.wikipedia.org/wiki/Track_transition_curve
diff: https://github.com/user-attachments/assets/3edb0bbd-4989-442...
Cool plugin idea though!
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.