Rounded Corners and Why They Are Here to Stay

Website DesignKeith Bryant • June 06, 2016 • 6 minutes READ

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.

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.

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.

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

Wufoo’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.

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

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:

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

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.