A Smooth Corner Radius in iOS

I remember looking at an Apple interface, comparing it to the things I was creating, and feeling a bit miffed that Apple’s designs were even rounder and warmer than mine. Once I learned about this shape called a squircle and figured out just what was going on, I knew I had to integrate this ultra-round shape into the products I build.

I started with Minimal | Notes — our notes app that is designed to evoke the experience of a real notebook. It’s a perfect candidate for the squircle, and I found the process of incorporating this shape surprisingly easy.

Here’s an exagerated depiction of what’s going on:

Figure 1.0 In the rightmost image, the blue is what gets “shaved off” to soften the corners.

Make It Work

To accomplish this, I did two things. I used Figma’s Corner Smoothing tool in every image that makes its way into the Minimal app (visible in Figure 1.1).

Figure 1.1 Figma’s Corner Smoothing tool.

I also created a UIKit-generated bezier path that incorporates Apple’s corner rounding math. It didn’t take long, and Minimal became squircle-rich. You can see the code below, which works with any instance of UIView or UIView subclass.

// Create a mask layer.
CAShapeLayer *maskLayer = [CAShapeLayer new];
maskLayer.frame = self.bounds;
// Define our path, capitalizing on UIKit's corner rounding magic.
UIBezierPath *newPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.layer.cornerRadius];
maskLayer.path = newPath.CGPath;
// Apply the mask.
self.layer.mask = maskLayer;

Outcome

I’m quite pleased with how it turned out. When I do side-by-side comparisons, the interfaces that incorporate the squircle come out feeling softer, warmer, and friendlier.

Figure 1.2 It’s subtle, but the image on the right has softer corners and feels more friendly.

Figure 1.3 Again, it’s subtle, but the image on the right has softer corners, making this most important visual feature feel more round and thus more alive.

If you’d like to read more about the squircle, check out this story about Rounded Corners in the Apple Ecosystem and this behind-the-scenes look at some of the math that makes the squircle, well, squircular.