# Quick Tip: Rounded Corners Done Right

##### Tutorial Details
• Topic: Aesthetics
• Difficulty: Beginner
• Additional info: Yes, I'm seeking counseling

This is going to seem like a no-brainer to many of you, but I see it happening so often I figured it was worth bringing up. We’ll call this issue improperly nested corners; a small detail which can ruin an otherwise brilliant design!

## Who’s Being Pedantic?

Improperly nested corners can be found in designs of all sorts, but I see them most often in icons and interfaces. If you’ve still no idea what I’m talking about, take a look at these two images of a lightbox mockup – which one has me grinding my teeth?

Yes, it’s the second which I’ll lose sleep over.

Put simply; if you have two rounded corners running parallel, the outer corner should have a larger radius which “flows” round the one on the inside.

Without wanting to go into mathematical formulae (did someone say pie?) try visualizing a central point, the “origin”, around which your first radius curves. Now use that same point to round your outer corner:

Form your curves this way and you’ll find the end result much easier on the eye.

## Bending Pipes

Think of the effect you’re creating as like bending a pipe:

## You do the Math

Interfaces built in html/css can be just as guilty of improperly nested corners. Think of form elements within a fieldset, or buttons within an alert box.

It’s not difficult to be dead accurate with it though; the difference in the border radius of your two objects should be equal to the gap between them. Simple!

And this can be flexible too, for example:

```<div class="outer">
<div class="inner">
</div><!--/ inner-->
</div><!--/ outer-->
```
```.inner {
width: 5em;
height: 5em;
background: black;
}
.outer {
display: inline-block;
background: lightblue;
}
```

Perfectly bent pipe (check out the demo).

## Exceptions

Like all matters in design, there are no concrete rules – you’ll always find exceptions. It’s a question of instinct.

Take this interface for example; the gap between the contact button and the dropdown doesn’t look anything like a bent pipe. Saying that, all the corners in this interface have uniform radius, so nothing looks out of place:

## Folks Who Get it Right

I think you’ve probably had enough of listening to me get wound up about something so trivial. Rather than draw attention to examples where I’ve seen it done awkwardly, let’s now take a look at some inspiring work by Dribbblers who do it right!

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
• http://webdesignertutorials.com Web Designer Tutorials

Quite a nice tip, I have to admit I’ve been doing it wrong for looong time. It all seems nice, but not as perfectly as after math.

• Joeff

this is a must especially if you’re a designer came from technical design discipline e.g. drafting, architecture, mechanical or you’ve been using AutoCAD.

• Mike

So, If I’m understanding correctly, if your gap(padding) is 7px on your “main” element then on the “inset” element will be 3px?

• Mike

Correction..

• http://www.snaptin.com Ian Yates

Correct :)

• MC

Loving the passion.

Good points. I generally do 5 in and 5 out, not anymore!

• http://www.motion-effect.no Johnny

Hey, thank you so much. A well needed tip that’s easy to remember :)

Blessings.

• Ben

good to know, thanks

• http://leianivey.com Leian

This is an amazing tip. I’ve been over looking this for years.

Thank You Maths.

• Techeese

Great tip, now if someone could share a quick way to do it in fireworks and photoshop :D

• Simon

Having a numerical input for corner radius’ in fireworks sounds like it should be a generic function, alas all we have is control points.

Thankfully there’s people out there who’ve come up with a solution, try using Matt Stow’s Set Primative Rectangle Corner Radius ( http://mattstow.com/fireworks.html )

• http://www.snaptin.com Ian Yates

Those are some great resources – thanks Simon :)

• Jesus Bejarano

Applay the same logic in firworks or photoshop in your rounded rentangles, you will see that is so simple.

• Simon

Taking back the web one bad corner at a time.

Thanks Ian, it sometimes the simplest things that some people forget. When you get a few simple things that are done correctly it all adds up and can make a design look askew.

• http://hootlist.com Efosa Oyegun

Great post Ian! Thanks for the clear explanation.

Lesson learned! :)

• Phil

Sat reading this in bed, so may be it’s just too early in the morning (plus had a broken night’s sleep thanks to leak in bathroom and girlfriend screaming in the night – as she was being mugged in her dream, sorry I digress)…and not wanting to be pedantic…
On the image we see inner border radius of 10px, border of 20px, so the outer border radius 40px. In the flexible example, if inner border radius is 1em, the padding of the outer is 3em, then shouldn’t the border radius be 4em not 3em???

• http://www.snaptin.com Ian Yates

Yes! You’re right – that should be 4em, sorry, I’ve added a demo to clarify. You may now go back to sleep :)

• Thomas

Wow nice tip!

Personally, I am not a natural designer. I can only do (pragmatic) design by copying the things that I see really work; and this is definitely one of them.

These kind of “basic” tips are really invaluable to people like me (of which I’m guessing there are a lot more lurking around). Keep ‘em coming! :)

• Hamid

waw! thank you once again Ian Yates, this post was so amazing for me and i will use that in my projects:-)

• Hamid

waw, thank you smark PhilxD Ian Becareful plsxD

• Hamid

Smart Phil*:P

• Andre

Great Post, thank :)

Here is another post about rounded corners and a very in depth explanation and example how you can implement it.

http://css-plus.com/2011/05/ie-and-rounded-corners/

• http://annarobertson.ca Anna

What about really small sizes – for example, the outer div is 5px radius, there’s 4px of padding… would the inner one really be 1px? It doesn’t look right either.

• http://www.snaptin.com Ian Yates

Looks fine, don’t you think? If you’re going for pixel perfection, then this is the road to happiness :)

• http://annarobertson.ca Anna

You’re right, it does look crisp like that. Throwing in another curveball – what if both divs have 1px borders? Does it change anything?

• http://www.snaptin.com Ian Yates

That depends on how the borders are applied :)

If you add a border to the inner div, under normal circumstances* it will push the outer div 1px further away. In which case you’d need to bump the border radius of the outer div by 1px.

Hope that helps!

• Pingback: Friday Favorites « lyssbarn

• http://www.tinocordes.dk/webdesign Tino Cordes

This is a good point. I’ve noticed the problem and these things can really hurt the eyes of a webdesigner. But I never thought about the math :-)

• Jeff

OMG. I’ve been staring at an iOS icon I’ve been working on all week thinking, “This is wrong somehow” and THIS IS WHY. I don’t know why I didn’t see it before. You are amazing. Thank you.

• http://www.snaptin.com Ian Yates

iOS icons are the best examples of where this can be make or break – glad you sorted it out!

• http://www.tjdesign.pl TJ-Design

So easy, but is css3 getting it right? When u make a “border radius” of 5px and a “border: 5px solid #000;”
will the border radius of the 5px thick border be 10px on the outside and 5px on the inside?

• http://www.snaptin.com Ian Yates

Any border you add will effectively extend the shape, so the outer edge of the border will be where the stated border-radius is applied.

Take a look at this screenshot. It’s (almost) the same as the demo we looked at in the tutorial, but the inner div has an additional yellow border. The outer edge of the border is where the border-radius for that div is applied.

Here’s the same demo, but with the border applied to the outer div.

As you can see, borders will pretty much behave themselves as long as you’re styling the rest ok..

• http://www.amazing-web-design.co.uk/ Joe Elliott

Hi Ian,

This can be so frustrating sometimes, I’m just like why doesn’t this look right. Now I know this maths, it will so much time, thanks man.

Joe

• http://www.snaptin.com Ian Yates

Good to hear Joe! I wondered about posting this one, but it seems to have been worthwhile :)

• SergeyDruid

Nice article!
I’m in these rounded corners since I was 5 years old, so nothing new here for me… but still, very useful and insighting article!

• http://wildwebwatch.com/ Hugo

Hey, thanks for the tip ! I always wondered what would be the rule for such cases. Glad you shared !

• Pingback: Best of Tuts+ in May 2012

• http://www.uckhandla.com/ uck

Wow. Nice article! 10+ / 10.

• Pingback: Best of Tuts+ in May 2012 | Clixto7

• Pingback: Best of Tuts+ in May 2012 | Wptuts+

• thekmf

I was expecting an image of a straight corner.
/is somewhat disappointed.

• http://bittersmann.de Gunnar Bittersmann

You do the math? Even if it’s just adding number, it’s unnecessary. Also unnecessary (and ugly markup!): multiple containers, i.e. ‘div’ soup with “inner” and “outer”.

This is “rounded corners done right”. Kudos to Lea Verou.

• http://www.snaptin.com Ian Yates

Oh absolutely – I’m not suggesting you should start piling elements into your document to build rounded edges. I’m saying that if your markup happens to be built that way (say, fieldsets within a form, or inputs within a fieldset) then this is what you need to take into consideration.

• Andy Hunt

I did something like this in CSS (along with a built-in drop-shadow) some years back.
Had reasonable success but ultimately abandoned it, as with most projects.
Inspired to give it another go now tho.
Thank you!

• http://matthewtyas.com Matt Tyas

It’s just one of those things, it just looks wrong.

• http://micahcrenwelge.com/ Micah

Wow, I always knew there was something wrong with putting the radiuses equal to each other but struggled finding the right balance. This helps so much!

• moonK

I was so guilty of this..

Thanks dude!!

• Pingback: Best of Tuts+ in May 2012 | GMancer

• http://www.antoniopratas.com Antonio Pratas

I see your point, I like the mathematical approach, but I don’t agree with the “done right” in the title.

You can’t just say that this is the way to do it right. If you want to build an element, be it a banner, a message box, etc, with 2 different radius, you’ll just do it, it always depend on the type of effect you want to achieve.

Specially in the case of having the dark transparent outer border, as you show in the first couple of images, most of the time I do those I want the outer border to have a smaller radius, I don’t want my site to appear totally round, I just want to have a slight roundness to break the straight lines and make it a little easier on the eye.

So, all in all, in most cases I believe this applies (icons, smaller elements) but I believe that it always depend on what you’re trying to create. There’s no right way for doing design, or is it? ;)

• Court Kizer

Antonio, you are so wrong. You need to learn about what exists in reality and what the eye find pleasing.

• bam

I don’t separate real life design and design in the web. And want to show an example which have come after i’ve looked at my desktop. See the design of iPad 3 and you’ll see that round corner of screen and outline of body of the device don’t follow rule from this article. I think designers from apple think about “what eye find pleasing”…

• Derrick Lambert

I disagree as well. You need to create a balance and the only way to do that (with the exceptions) is to use the technique discussed in the article. Just guessing a number for a border-radius doesn’t make for a uniform design. If you don’t want your design to look ’round’ then pick a smaller inner radius but the difference between the two is still your balance.

• http://www.heymonkeydesign.com Lenny Terenzi

Excellent! I will keep an eye out for this in my own work now…

• http://www.design4fantasy.com Saya

Wow too many good ones, I need to study most of them, just need to stretch hours in a day!!

• http://www.efeek.co.uk efeek

Great article! Thank you for explaining it well
I submitted a bug to the jQueryUI team (ticket #8054) some 5 months back as rounded corners not done right is one of my bugbears within the jQueryUI CSS. And yes, although a software designer/developer, I do come from a manufacturing/architectural background.

• Pingback: Rounded Corners | Head in a Cloud

• Pixelologist

I, too, am guilty of not having paid enough attention to this detail in my designs. I wouldn’t call it pedantic at all – it’s the little things that make a design look professional and coherent. So thank you!!

AND…not only am I going to get a lot out of this article for the reasons intended, but I also picked up a blindingly obvious tip from the screenshot of your code: comments on the closing div tags. Brilliant! How I never thought of that myself is beyond comprehension \_(シ)_/￣

• http://www.7ooof.net/ BoMaZeN

Great tip,thank u

• sakib

thanks. that was useful tip indeed

• http://www.portraitstudiochicago.com Michael

Thanks for the math. Got it.

• leeyo rapirap

hey, I think this is very useful. we have projects that uses border radius a lot and this one is a keeper. will definitely bookmark. great thanks!

• aronshay011

Great stuff from you, man. I’ve read your stuff before and your just too awesome. I love what you’ve got here, love what you’re saying and the way you say it. You make it entertaining and you still manage to keep it smart. I can’t wait to read more from you