Advertisement
Visuals

Quick Tip: Rounded Corners Done Right

by

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).


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!

Related Posts
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Code
    JavaScript & AJAX
    Ember Components: A Deep DiveEmber components retina preview
    Ember.js is a JavaScript MVC framework that allows developers to create ambitious web applications. Although pure MVC allows a developer to separate concerns, it does not provide you with all the tools and your application will need other constructs. Today, I'm going to talk about one of those constructs. Ember components are essentially sandboxed re-usable chunks of UI. If you are not familiar with Ember, please check out Getting Started With Ember.js or the Let's Learn Ember Course. In this tutorial, we will cover the Web Components specification, learn how to write a component in Ember, talk about composition, explain the difference between an Ember view and an Ember component, and practice integrating plugins with Ember components.Read More…
  • Web Design
    HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • 3D & Motion Graphics
    3D Studio Max
    Create a Game Ready Fire Extinguisher with 3D Studio Max: Part 13dsmax fire extinguisher pt1 retina
    Making models for 3D games is really fun. And the most exciting and challenging part is that we model in low poly and then bring the details to life through sculpting, texturing and baking methods. Although the final model looks quite highly detailed, in reality it is still a low poly mesh. In this tutorial series, we'll learn how to create a game ready Fire Extinguisher in 3ds Max. We'll start with basic low poly modeling techniques and then cover the highly detailed modeling, texturing and baking of this object in later parts.Read More…
  • Web Design
    HTML/CSS
    Foundation for Beginners: Buttons and DropdownsFoundation button retina
    In this part of "Foundation for Beginners" we’ll look at buttons, dropdowns and the "Clearing" plugin.Read More…