Apple - What is the definitive iPhone X corner radius?
iPhone X corners do not have a conclusive corner radius. They're not normal arcs, they are ‘continuous corners’.
You can't replicate these with a simple .cornerRadius, and you also can't use Apple's own continuous corners, since that's a private API.
CALayer on iOS 11 has a private "continuousCorners" property, which is what powers many rounded corners in SpringBoard – and likely more! Now I'm jealous.
https://twitter.com/argentumko/status/955773459463790592
The closest you can get without your own implementation is UIBezierPath's rounded rectangle drawing, which uses _continuousRoundedRectBezierPath
.
Brad Ellis has an article detailing the curves on the iPhone X.
[..] iPhone X rounded screen corners don’t use the classic rounding method where you move in a straight line and then arc using a single quadrant of a circle. Instead, the math is a bit more complicated. Commonly called a squircle, the slope starts sooner, but is more gentle.
You can see the difference here:
The shape of the corners cannot be described as an arc. It can however be reproduced using public API since iOS 11. UIBezierPath.init(roundedRect:cornerRadius:)
will create a rectangle with continuous rounded corners.
Source: https://medium.com/fueled-engineering/continuous-rounded-corners-with-uikit-b575d50ab232
iOS 13 introduced an explicit cornerCurve
property on CALayer: https://developer.apple.com/documentation/quartzcore/calayercornercurve