In our web application we are adding rounded corners on small elements (e.g. 60px buttons and tabs), medium elements (e.g. 150px dropdown menus, help-tips sections), and large elements (e.g. 600px borders around forms).

I'm assuming that it makes sense to put larger rounded corners on larger elements, but how much larger? Is there a rule of thumb or generally accepted guidelines for how border-radius should relate to element size?

  • 2
    I think this is more of a graphic design question than a UX question.
    – Peter
    Commented Feb 28, 2012 at 10:54

2 Answers 2


I've always looked at it that elements at the same level of hierarchy in the containment structure should have the same border radius. That way, then sibling elements will always play nicely when sitting next to each other, irrespective of their relatives sizes and proportions.

So an outer container has a larger border radius than an inner container, and any container has a larger border radius than the buttons contained within it, but all those child/leaf elements should use a consistent radius - again so that they sit nicely next to each other.

Typically for buttons and other controls, I would use a border radius between 8% and 15% of the smallest dimension, so a 32px button might have a border radius of 3 pixels and importantly: that will define all the other controls as well.

Then a toolbar that contains those elements and has a height of 40 to 50 pixels might have a border radius of 4 to 5 pixels, but it depends on the padding and margins so that the curves look good in close proximity.

However this doesn't then mean that the outer container which may have a width of 800 should have an 80 pixel border radius. As you go up in the hierarchy, the border radius should be step increased, not percentage increased.

You let the inner controls drive the border radii from the inside-out.

So here's an example.

No increase between hierarchy levels - the outer boxes start to look too square compared to the inner buttons

enter image description here

Increasing by percentage - the outer boxes start to look too curved and comical compared to the inner buttons

enter image description here

Increasing by step increments - the outer boxes are in synch with the inner butons - no single part looks out of place.

enter image description here


No rules. Purely an aesthetic call on your part.

Mathematically, it's sometimes nice that nested elements share the same center point when creating the radii.

For instance, a box inside a box with 10px of margin between the two. If the inside box has a corner radius of 3px, the outside would have one of 13px if you want them to share the same centerpoint.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.