Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question

migrated from ux.stackexchange.com Feb 28 '12 at 11:22

This question came from our site for user experience researchers and experts.

2  
I think this is more of a graphic design question than a UX question. –  Peter Feb 28 '12 at 10:54
add comment

2 Answers 2

up vote 6 down vote accepted

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

share|improve this answer
    
great answer. nice illustrations too. thanks! –  Justin Grant Feb 29 '12 at 6:48
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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