15

I've been experimenting and have found no conclusive corner radius for the iPhone X.

Using Xcode, I created a circle with a width and length of 80 (so radius 40), and put it in the top left corner of the iPhone X (so x and y are zero), there is a tiny white gap between the circle and the the edge of the screen, which you can see here:

I also tried another method, doing this with a button:

button.frame.size.height = 812
button.frame.size.width = 375
button.layer.cornerRadius = 40
button.center = self.view.center

With this I am left with:

So the question is, what is the real corner radius? Or what is going on with Xcode?

Improve this question

4 Answers 4

Reset to default
21

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.

Improve this answer
1
  • 1
    thank you so much this makes so much more sense now
    – chriscrutt
    Jan 27, 2018 at 23:59
5

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:

enter image description here

Improve this answer
3

The following Objective-C line

NSLog(@"%@", [self traitCollection]);

executed in the iOS 11.0.1 simulator on the iPhone X produces the following output:

<UITraitCollection: ... _UITraitNameDisplayCornerRadius = 39.000000>

So it looks like at some point in time, somebody at Apple thought the corner radius was 39 points. I guess that's the most official answer we'll get. :-) But as the other answers explain, that information is not very useful...

Even more useless information: Some other iOS 11.0 and 11.1 simulators report _UITraitNameDisplayCornerRadius = 0.000000 for iPhones without round corners (e.g. see this SO question), but the simulator for iOS 12.2 does not include the _UITraitNameDisplayCornerRadius property in the log output for UITraitCollection, and neither does a real iPhone X running iOS 11.2.1. I guess they removed this property from the log output in iOS 11.2 or so.

P.S.: I guess it doesn't matter, but I got these results on Xcode 10.1.

Improve this answer
3

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

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .