Rounded Corners and Why They Are Here to Stay

You see them almost everywhere these days. It’s difficult to think of them as a trend, as they’ve essentially become an industry standard. We see them in hardware, in user interfaces and on the web. Rounded corners are here to stay, and it’s not just because they’re pretty. There’s more to them than meets the eye. Why, then, do we love rounded corners?

Rounded Corners are Easy on the Eyes (and the Brain)

It takes less cognitive load to see rounded rectangles than it does to see sharp-cornered ones. Professor Jürg Nänni, authority on visual cognition, states that:

A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our ‘fovea-eye’ is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down.

Sharp corners interrupt thought. To visualize a sharp-cornered shape, the brain processes point A to point B, pauses for a bit and then goes from point B to C, and so forth until it completes the circuit. In the case of a rectangle, it takes your brain 4 computations to recognize it. With rounded corners, the abrupt pause never happens, and your brain only does one single computation as your eyes smoothly scan its edges.

Rectangles
Which one is easier on the eyes?

We’ve Been Trained to Trust Rounded Corners

The year was 1981, and Macintosh was still in early development. Resident graphics master Bill Atkinson had just managed to get its OS to draw circles and ellipses, and he was proud of it. However, Steve Jobs, The Father of the Macintosh, had another more pressing request: rounded rectangles.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

To Jobs, rounded rectangles were friendly, and he insisted that rounded corners were already everywhere. Jobs took Atkinson for walk to show that his request was not mere aesthetic whim. A few rounded objects and a “No Parking” sign later, Atkinson was convinced.

Atkinson managed to develop the necessary code to render rounded rectangles at lightning-fast speeds. Buttons and windows became rounded. These helped define the “safe” interface of the Macintosh. To customers, Mac had a softer, more welcoming appeal, which sat in contrast to the intimidating aura of both IBM and Microsoft’s products.

Apple’s legacy with rounded corners extends beyond software. When introduced, the iPhone was more “pocketable” than other phones of its time. Similarly, the iMac wasn’t as intimidating as the standard “Personal Computer” of the day: the Mac seemed like a laid-back friend; the PC, a man in a dark suit.

Jobs got it. Apple gets it. We are hard-wired to avoid and dislike sharp objects.

Ball vs KnifeWhich one would you let your 4-year-old touch?

Sharp corners say, “Go away”, “Don’t touch me” or “I’ll scratch you”; rounded corners say, “It’s okay to hold me”. As children, we were trained to stay away from knives and sharp objects because they can hurt us.

Neuroscientists call our aversion to sharp corners “avoidance response” or “contour bias”. We tend to develop negative bias toward a visual object based on its semantic meaning (e.g. “used for cutting”) and the emotions it triggers (e.g. threat, pain, fear). Our modern brains are thousands of years old, but we still haven’t outgrown this primordial reaction.

Rounded Corners and When to Use Them

Oversaturating your design with rounded corners isn’t a good idea, unless you’re designing for a very young demographic. When to use rounded corners depends on the emotions that you want your users to experience and the identity you wish to present.

Rounded corners evoke warmth and trust. Many call them “friendly rectangles” for this reason. This is exactly why many call-to-action buttons (a.k.a. buy-now or sign-up buttons) are designed this way. It makes customers feel safe about doing business with a brand.

WufooWufoo’s friendly home page makes you feel confident about doing business with them.

Rounded corners are more effective for maps and diagrams, rendering them easier to follow. As mentioned earlier, the natural movement of our eyes is accustomed to curves. Sharp corners abruptly knock your attention off a path when it changes direction.

Coding Rounded Corners: CSS3

Many designers avoid using CSS3 because of its limited browser compatibility, most notably with IE. Nevertheless, there are core CSS3 properties that already work in all modern browsers, including IE 9 and higher. One of these is border-radius, which allows us to add rounded corners to an element just by specifying the radius.

css3 supportBorder-radius is one of the core CSS3 properties that is supported by most browsers these days.

HTML

The markup for the box consists of a single div and two classes. The box class defines the dimensions of the box, while the rounded class deals with the corners.

<div class="rounded box">
   <p>Let me not to the marriage of true minds admit impediments</p>
</div>

CSS

We’re going to style both of these classes to create our rounded box.

.box {
	width: 200px;
	height: 150px;
	background-color: #FC5D8A;
	color: #fff;
	margin: 3em auto;
}

.rounded {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

Essentially, using border-radius like superimposing four circles, with a radius of 10 pixels, on the corners of the box, and cutting out the overflowing area, as shown in the image below (click it to view the demo).

Demo 1

Because browsers are slowly rolling out CSS3 compatibility, some only provide experimental support, which can be handled using vendor prefixes. In our case, we used -webkit for Safari and Chrome, and -moz for Firefox. IE uses the standard un-prefixed property.

Order matters. Always put the actual, un-prefixed CSS property last. This ensures that your code will work in the future when browsers finally implement official support for the property. The real property, once a browser supports it, will override the experimental declarations above it.

Coding Rounded Corners: The Old Ninja Way

Before there was CSS3, there were karate corners. Designer Kyle Schaeffer popularized this technique, which only uses a single PNG image and no scripts.

The Image

For this demo, we’ll be making an orange rounded rectangle. To create 10-pixel rounded corners, we need to make a image of a circle with a diameter of 20 pixels. The circle should have the same color as the background of the container, like this:

Corner

HTML

The HTML code is more complex than it’s CSS3 equivalent, but is still simple enough. Here we have an outer div to represent the box itself, and 4 more inside of it to represent the corners. A 5th div serves as a wrapper for the text.

<div class="rounded-box">
    <div class="corner NW"></div>
    <div class="corner NE"></div>
    <div class="corner SW"></div>
    <div class="corner SE"></div>
    <div class="rounded-box-content">
        <p>Love's not love that alters when it alteration finds.</p>
    </div>
</div>

The NW class represents the top-left corner of the box, NE represents the top-right corner, and so on for SW and SE. We will use CSS to position the classes at each of the corners of the container.

CSS

.rounded-box {
	position: relative;
	background: #FC5D8A;
	width: 100%;
}

.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url('corners.gif') no-repeat;
	font-size: 0%;
}

.rounded-box-content {
	padding: 10px;
}

.NW {
	top: 0;
	left: 0;
	background-position: 0 0;
}
.NE {
	top: 0;
	right: 0;
	background-position: -10px 0;
}
.SW {
	bottom: 0;
	left: 0;
	background-position: 0 -10px;
}
.SE {
	bottom: 0;
	right: 0;
	background-position: -10px -10px;
}

You can optionally add some additional styles to customize the text. Here’s the result, which is just like what we achieved using CSS3 (click on the image below for a live demo):

Demo 2

The limitation of this method, however, is that the outer portions of your corner image must match whatever background content appears behind the rectangle. If this is a blank white page (as in the demo), this isn’t a problem. If you have an image, a pattern, or some other more complex design in the background, this can become very complicated if not impossible. This is why the CSS3 method is the preferred approach.

Conclusion

I hope that this article has helped you understand why rounded corners are much more than a fad, why they appeal to us on a very low psychological level, and how they should be used when designing web content. While you must be careful not to overdo it, measured use of rounded rectangles in your designs will make visitors will feel more comfortable and safe on your site, and they won’t have to work as hard to process the visual information being presented.

This article was written by Keith Bryant, a member of the DWUser.com education team. DWUser offers tools for web designers and developers, including EasyRotator, a free jQuery slider builder for WordPress and Dreamweaver.

Newsletter

5 Comments
  1. Raf Jun 6, 2:34 pm

    One important feature: rounded corners, unlike sharp corners, provide clear bounds to a list of block elements.

    Take a look at an iPhone settings list: the first and last block elements have respectively top and bottom corners rounded so that you know where the list begins and ends, like so:

    http://www.iclarified.com/images/tutorials/493/2124/2124.png

    Reply
    0
  2. Mindy A Jun 6, 8:28 pm

    Great article! I love using round boxes when designing. I understand now why this style gives off a soft, safe vibe. Jobs was a very brilliant man, indeed! We will always remember him for the great things he did. Thanks for sharing!

    Reply
    0
  3. karthik Jun 7, 7:07 am

    Nice article.I have been using rounded corners without knowing the reason behind it :)

    Reply
    0
  4. Pritesh Desai Jun 9, 11:03 pm

    Round corners have been around for a very long time (XP had them). I’ve many designers go for a clean sharp corner look. Windows Phone Mango OS uses sharp corners and its looks good!
    Metro UI is completely based on sharp edges.

    Reply
    -1
  5. Evert Jun 25, 5:43 pm

    Does anyone know at what point our brain starts processing a corner as “rounded” as opposed to “sharp”? Does it happen at 1px radius, 2, 3, 4 ?

    Reply
    +4

Leave a Reply

*
* Minimum length: 20 characters