1. Web Design
  2. UX/UI
  3. UI Design

Quick Tip: Rounded Corners Done Right

Scroll to top
Read Time: 2 min

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;
    border-radius: 1em;
.outer {
	display: inline-block;
    background: lightblue;
    padding: 3em;
    border-radius: 4em; /*offset + radius of .inner*/

Perfectly bent pipe (check out the demo).


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:

Dropdown menu navigation - UI/UX with CSS3 by Jonathan Moreira

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!

Snooker Table icon by JJ-Maxer
Postale Icon App by Aditya Nugraha Putra
Icon by chnvan
Found UI by Martin Karasek
Veggie Meals app icon by Max Rudberg
Upload button by Fares Farhan
BPM Lock Button (ON) by Paul Flavius Nechita
Sign In Button by Brad Haynes
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.