Exploring iOS 7 Rounded Corners

Apple announced iOS 7 at the WWDC 2013. Compared to the previous iOS versions it gets a whole new look for the first time. There’s a lot of discussion going on whether it’s good or bad design. I personally like it very much, and it reminds me a bit of the huge step from Mac OS 9 to Mac OS X years ago. Many things have changed in iOS 7, but one little detail attracted my attention and that’s what this article is about: rounded corners. Apple is very obsessed about every little detail; in my opinion that’s one of the secrets why they make so beautiful and successful products. Usually a rounded corner is just a quarter of a circle, one might think. But Apple changed the form factor of rounded corners in iOS 7. Here is a little comparison:

Rounded Corners in iOS 6Rounded Corners in iOS 7


Animated iOS 6 vs 7 Comparison


To me, the corners in iOS 7 look much smoother and organic. These new corners are everywhere in iOS 7. One reason for this is that as a developer you get these new corners for free. Whenever you use the existing functions of the operating system to create rounded corners, you get the improved ones in iOS 7, e. g. when calling [UIBezierPath bezierPathWithRoundedRect:cornerRadius:].

Here is an image that shows the difference between the old and the new corners:

Corner Difference between iOS 6 and iOS 7


You see that not many pixels have changed, even at this big size, but nevertheless it has some subtle but perceptible impact in how the corners look and feel.

Currently there are a few discussions on how Apple draws these new corners; even some mathematical equations are published. I took a rather pragmatic approach to analyze it: I created a small test app that lets the system create a rounded rectangle and then introspects and visualizes the elements of the returned bezier path. Then I launched this app on iOS 6 and iOS 7. Here are the results:

Rounded Corner Bezier Path on iOS 6
Rounded Corner Bezier Path on iOS 7
A red cross marks every point where a straight line is drawn to. An orange cross with two green control points in between define a bezier curve. As you can see there are four little points where the path is not perfect yet: there are four (very) short straight lines from a curve end point (orange) to a new point (red) very closely together. These unnecessary four short lines can be stripped out of the path; maybe this will be fixed in the final version of iOS 7.

What’s also interesting is the fact that the edges of the rectangle are bent much earlier than before. In the picture below the blue area is where the lines are curved in iOS 6. The red area is where the lines are curved in iOS 7. It’s more than half the corner radius earlier:

Line bending areas

Update: Together with @flarup and @marcedwards we tried to figure out the exact radius for the corners being used for the app icons in iOS 7. Additionally I filtered out the annoying short lines metioned above and exported the UIBezierPath as SVG file. As far as we can see a radius of 27 pixels at 120×120 pixel icon size produces a pretty good match. Download it here.

In case you wonder how I introspected the UIBezierPath to draw the images above – here is the UIView code:

@interface CornerTestView ()
@property (nonatomic) CGPoint previousPoint;
@end

@implementation CornerTestView

static void pathInspector(void *info, const CGPathElement *element)
{
	CornerTestView *view = (__bridge CornerTestView *)info;
	[view addElement:element];
}

- (void)drawRect:(CGRect)dirtyRect
{
	[[UIColor whiteColor] setFill];
	UIRectFill(dirtyRect);

	CGRect rect = self.bounds;
	CGFloat size = MIN(CGRectGetWidth(rect), CGRectGetHeight(rect)) - 20;
	size = round(size / 2) * 2;
	rect = CGRectMake(round(CGRectGetMidX(rect) - size / 2), round(CGRectGetMidY(rect) - size / 2), size, size);
	CGFloat radius = size / 4;
	UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius];
	[[UIColor colorWithRed:0.90 green:0.93 blue:1.0 alpha:1.0] setFill];
	[path fill];

	CGPathRef cgPath = path.CGPath;
	CGPathApply(cgPath, (__bridge void *)(self), pathInspector);
}

static UIBezierPath *crossAtPoint(CGPoint p)
{
	UIBezierPath *cross = [UIBezierPath bezierPath];
	cross.lineWidth = 0.5;
	[cross moveToPoint:CGPointMake(p.x - 2, p.y - 2)];
	[cross addLineToPoint:CGPointMake(p.x + 2, p.y + 2)];
	[cross moveToPoint:CGPointMake(p.x - 2, p.y + 2)];
	[cross addLineToPoint:CGPointMake(p.x + 2, p.y - 2)];
	return cross;
}

- (void)addElement:(const CGPathElement *)element
{
	switch (element->type) {
		case kCGPathElementMoveToPoint:
			[[UIColor grayColor] setStroke];
			[crossAtPoint(element->points[0]) stroke];
			self.previousPoint = element->points[0];
			break;
		case kCGPathElementAddLineToPoint:
		{
			UIBezierPath *line = [UIBezierPath bezierPath];
			line.lineWidth = 0.25;
			[[UIColor lightGrayColor] setStroke];
			[line moveToPoint:self.previousPoint];
			[line addLineToPoint:element->points[0]];
			[line stroke];

			[[UIColor redColor] setStroke];
			[crossAtPoint(element->points[0]) stroke];
			self.previousPoint = element->points[0];
		}
			break;
		case kCGPathElementAddQuadCurveToPoint:
		{
			UIBezierPath *line = [UIBezierPath bezierPath];
			line.lineWidth = 0.25;
			[[UIColor lightGrayColor] setStroke];
			[line moveToPoint:self.previousPoint];
			[line addLineToPoint:element->points[0]];
			[line addLineToPoint:element->points[1]];
			[line stroke];
			[[UIColor cyanColor] setStroke];
			[crossAtPoint(element->points[0]) stroke];
			[[UIColor magentaColor] setStroke];
			[crossAtPoint(element->points[1]) stroke];
			self.previousPoint = element->points[1];
		}
			break;
		case kCGPathElementAddCurveToPoint:
		{
			UIBezierPath *line = [UIBezierPath bezierPath];
			line.lineWidth = 0.25;
			[[UIColor lightGrayColor] setStroke];
			[line moveToPoint:self.previousPoint];
			[line addLineToPoint:element->points[0]];
			[line addLineToPoint:element->points[1]];
			[line addLineToPoint:element->points[2]];
			[line stroke];
			[[UIColor greenColor] setStroke];
			[crossAtPoint(element->points[0]) stroke];
			[crossAtPoint(element->points[1]) stroke];
			[[UIColor orangeColor] setStroke];
			[crossAtPoint(element->points[2]) stroke];
			self.previousPoint = element->points[2];
		}
			break;
		case kCGPathElementCloseSubpath:
			break;
	}
}

@end

Have fun!

Tags: , , , , , , , , , , , , , ,

20 Responses to “Exploring iOS 7 Rounded Corners”

  1. […] Manfred Schwind, Michael Flarup and Marc Edwards put their heads together to: […]

  2. You got into very nice details regarding border curves. That’s called perfectionism.

  3. Hi there, I found your web site by the use of Google while looking for a related matter, your website came up, it appears great. I have bookmarked to my favourites|added to bookmarks.

  4. David says:

    Great work. It’s BS that apple doesn’t just make this available to devs– instead all of us are running around blind, wasting our time trying to figure this crap out. Thank you, your work is very much appreciated.

  5. […] Schwind takes a wonderfully detailed look at the change to the rounded corners of icons between iOS 6 and […]

  6. […] drastic alterations, but the layout of the home screen and the shape of its icons, have remained virtually unchanged. The largest change is really just the color palette. […]

  7. […] Since iOS 7′s icons are slightly larger and have a different corner radius, some icons for iOS 6 do not display properly leaving white areas around the edges, notes the report. In order to avoid this interface issue, developers will need to include larger icons in their applications. iOS 6 icons on the iPhone come in at 114 x 114 pixel resolutions, while iOS 7 icons are slightly larger at 120 x 120 pixel resolutions. For the iPad, iOS 6 icons are at resolutions of 144 x 144, and on iOS 7 they come in at a resolution of 152 x 152: More specifics on the exact shape and dimensions of the new iOS 7 icons can be found here. […]

  8. […] Per risolvere il problema di interfaccia, gli sviluppatori dovranno aggiornare le proprie app. Le icone di iOS 6 su iPhone hanno la risoluzione di 114 x 114 pixel, mentre le icone di iOS 7 sono leggermente più grandi con risoluzione di 120 x 120 pixel. Per l’iPad, le icone di iOS 6 presentano una risoluzioni di 144 x 144, mentre su iOS 7 hanno una risoluzione di 152 x 152. Per maggiori informazioni sulla risoluzione delle immagini vedete qui. […]

  9. Paul Daniel says:

    This is an example of how an industrial designer has made his mark on a UI.

    The corners are not a geometric radius and so an exact radius cannot be calculated. This is a bezier curve and is almost certainly an example of ‘curvature continuity’, whereas the old icons used ‘tangential continuity’. This is something used all the time in surface modelling (industrial design) to avoid ‘sharp’ or visible transitions in geometry and, in basic terms, results in the shape looking smoother or more organic.
    You can find a fairly good visual explanation of it here: http://www.core77.com/blog/featured_items/a_periodic_table_of_form_the_secret_language_of_surface_and_meaning_in_product_design_by_gray_holland_12752.asp
    You can find a fairly good mathematical explanation of it here:
    http://en.wikipedia.org/wiki/Geometric_continuity#Geometric_continuity

  10. […] diesem Wochenende findet sich auch der damit einhergehende neue Radius für die Software-Symbole in der […]

  11. Pablo says:

    Rocket science over piece of Apple-crap. – WTG! Time well spent!

  12. […] Больше по этой теме можно найти в блоге компании Manbolo и mani.de. […]

  13. […] Mike Swanson’s Photoshop script that creates shapes, based on similar inspection to Manfred Schwind’s Exploring iOS 7 rounded corners […]

  14. […] should definitively read Exploring iOS 7 Rounded Corners from Manfred Schwind for a brilliant and deep analyse of the new shape. The graphics resources (SVG […]

  15. Ian says:

    Paul Daniel has the right phenomena, but it’s not an ID exclusive thing. Graphic designers, especially typographers, are also familiar with these edges and the steps needed to correct for them (though the term of the phenomena on GD is “boning”).

  16. Ali says:

    Apple should have just left the icons alone. Period. This isn’t like a refresh of their logo (nod to Yahoo), where they do all the replacement work. This is modifying a fundamental archetype of the iOS system itself which directly and negatively impacts hundreds of thousands of developers. Let’s face it, 99.9% of user don’t and won’t notice any change (unless you force them to see it with flip animation). But it makes it hell for all Apple developers to make such a useless change for an inconsequential benefit. Its not as if the “recommended” icon set wasn’t already bloated enough. And rather than simplifying it (isn’t that what Apple is claiming to do?), they make it worse by bloating apps even more. Let’s be real, the only reason they did this crap was to force all app makers to “redo” all their icons in the new Apple preferred style. That’s it. They knew that devs would see their beautiful iconography suddenly having tiny line artifacts and a screwed up radius around their carefully designed edging treatment. So Apple messed with both the size and the radius just enough to force devs to make changes. Their motive was clear – devs would predictably think: “well heck, why don’t I just redo my icons in the “new iOS 7 minimalist style” at the same time, since its such a pain to change them”. And Bingo! Jony gets what he wants. Namely, that all developers change their icons to remove gradients, patterns, shadows, edging, and skeuomorphism. Brilliant right? No. Painful and disrespectful to their loyal design community. Its already clear to many that the iOS 7 revamp will be regarded as a low point in the history of Apple, on par with the previous post-Jobs era.

  17. BFWdevelopment says:

    “Let’s be real, the only reason they did this crap was to force all app makers to “redo” all their icons in the new Apple preferred style. That’s it. They knew that devs would see their beautiful iconography suddenly having tiny line artifacts and a screwed up radius around their carefully designed edging treatment. So Apple messed with both the size and the radius just enough to force devs to make changes. Their motive was clear – devs would predictably think: “well heck, why don’t I just redo my icons in the “new iOS 7 minimalist style” at the same time, since its such a pain to change them”. And Bingo! Jony gets what he wants.”

    This is the real meaning I completely agree, although it still leaves the design change interesting (and perhaps almost iconicly “apple-ey” in nature) given the level of thinking behind it.

  18. Chris Heath says:

    The iOS icon grid, including the corner curve can be easily put together using two ratios. These ratios are the golden section and the square root of two. Determining the points through which the curved corner passes is surprisingly simple. The grid as it is presented by Apple shows how to establish three points of the curve:
    – the point where the curve departs from the horizontal
    – the point where it departs from the vertical, and
    – the point where the curves intersects the 45 degree line drawn from the centre.

    Extending the grid using the ratios mentioned above perfectly establishes two more points through which a line of best fit can be drawn, e.g., a Bézier curve.

    BTW. You might recall in Apples animation, a series of dots superimposed on the curve. If you draw a line from each dot to the centre, the lines a 3 degrees apart. It’s probably just a misleading bit of artistic license by the animator and doesn’t mean anything.

    It makes sense that an industrial design created this grid. You only need a compass and straight edge to recreate it; complex algorithms are not required. Don’t overthink it, it’s not that difficult.

Leave a Reply