Turning a Rounded Rectangle into a Circle

A plain old rectangle is just a rounded rectangle where the “rounded corner” has a radius of zero millimeters.

A circle, on the other hand, is a rounded rectangle where all sides are the same length and the corners have a radius equal to one-half of the length of a side.

Here’s a “fun fact” – a hot dog is a rounded rectangle where the corner radius equals one-half of the length of the shortest side.

But back to circles…  If you look at a typical keyguard in landscape mode you’ll probably see something like this:

Note that the openings are wider than they are high.  That’s confirmed by the text that appears in the console pane:

It turns out that the size of a keyguard grid opening is largely controlled by the widths of the rails around the openings.

The first thing we have to do to turn these openings into circular ones is to reduce the width of the openings or increase their height – or both.

We can reduce the width of the openings by increasing the width of the vertical rails:

By setting the vertical rail width to 8 mm, the cell width is now 26.632, which is less than 1/2 mm larger than the cell height value of 26.1688.  Not exactly the same but close enough.

We’re now ready to set the corner radius of the cells.  The radius should be set to one-half of the side length.  One-half of 26 is 13 so that’s what we’ll set the corner radius to:

If you enter a value larger than 1/2 the shortest side, the designer will set the corner radius to exactly 1/2 the length of the shortest side.  Larger values will be ignored.

Here’s the result of widening the vertical rails and setting the corner radius to about one-half of the side width:

They’re not perfect circles, but you’ll have a hard time telling the difference.

The designer won’t let you assign a corner radius value that is larger than the smallest side of the opening.