It's not a radius. 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 it 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.

Here is a more detailed study on my blog.

10% popularity Vote Up Vote Down

@Becky351

If this is the correct icon, looks like the border radius is 12px.

The overall size is 60 x 60px.

Image taken from DesignBoom

10% popularity Vote Up Vote Down

Feed

: What are the radii for the new iOS 7 icons? What are the radii and sizes for the new iOS 7 icons?

More posts by @Mendez620

: How to recreate this gradient? I saw a similar question has been asked but did not have a good answer. I want to recreate the gradient on the screenshot I attached. I couldn't figure out

: Color Swatches: loading multiple ASE files in illustrator CS5.5 Is there a way to import multiple ASE files from the Swatches palette in Illustrator CS5.5 ? Currently I can only import one ASE

: White edges on exported .pngs How do I get rid of the white edges on this exported .pngs? I have tried many different options (changing 8 bit to 16 bit, save for web, interlaced) and nothing

: What is the best way to make text fit inside a circular shape? I'd like to create something like this: (see design peg) Ideally, the text should be editable so that any letter combination

Login to post a comment!

2 Comments

Back to top | Use Dark Theme