Good rounded corners are hard

A Twitter thread from Ken Kocienda <@kocienda> I want to keep about rounded rectangles, a signature element of Apple from the Eldar Days:

---

Consider the round rectangle (roundrect), a four-sided figure with rounded off corners. They are often used in user interface designs… but they have a built-in aesthetic glitch which I’ll describe later. First, to make one.

Round rectangles are generally specified with a rectangle’s width and height plus a radius for the corners, like this 200×120 rectangle with a corner radius of 20.

A fully-rounded off roundrect has a corner radius equal to one-half the shorter side, like this 200×120 rectangle with a corner radius of 60.

Once you have one of these fully-rounded off roundrects, you can imagine making them in a different way. Start with two circles of radius 60, position their centers 80 units apart, connect the top-most and bottom-most points of each circle with a straight line.

Then erase all the interior lines. This shape is also 200×120, two times the radius + 80 = 200, and two times the radius = 120. QED.

The problem is with those connecting lines. That line is straight, but the remaining parts of the circle are not. These lines are tangents to the circles, i.e. they meet the circle at a single point.

Crucially, at that point, there is a discontinuity between a straight element and a curved element. The effect becomes even more pronounced as the aspect ratio between the width and the height of the rectangle increases. Look at the points I didn’t circle. See it?

Once I saw this, it became hard to unsee. At least it was for me.

There are shapes that don’t have this glitch. Consider the superellipse.

This is the shape used for iOS icons (or very close to it). The industrial design team at Apple used this shape in many of their designs.

Inside Apple, we usually referred to these shapes as “continuous curves”, since they didn’t have this point discontinuity glitch. It’s a subtly more pleasant shape. By playing around with the numbers, it’s possible to approximate the original 200×120 roundrect without the glitch.

Note the comparison between the continuous curve (in blue) and the roundrect (in black). The roundrect sticks out right in an unsightly way at the point of the discontinuity.

Now the “problem” with continuous curves is that they they aren’t built into to any 2D computer graphics system in any operating system I know about, and they can only be approximated by bezier curves, which is a common 2D graphics feature. So, a lot of people are familiar with bezier curves, and they’re easier to work with, so that’s usually what gets used. Too bad.