Thinking

Why Rounded Corners Are Easier on the Eyes

Designers use rounded corners so much today that they’re more of an industry standard than a design trend. Not only are they found on software user interfaces, but hardware product designs as well. So what is it about rounded corners that make them so popular? Indeed they look appealing, but there’s more to it than that.

Rounded Corners Appear Less Bright

Anyone can appreciate the aesthetic beauty of rounded corners, but not everyone can explain where exactly that beauty comes from. The answer to that is literally in your eye.

Some experts say that rectangles with rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process. The fovea is fastest at processing circles. Processing edges involve more “neuronal image tools” in the brain [1]. Thus, rectangles with rounded corners are easier process because they look closer to a circle than a regular rectangle.

Scientific research done on corners by the Barrow Neurological Institute found that the “perceived salience of a corner varies linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles” [2]. In other words, the sharper the corner, the brighter it appears. And the brighter a corner appears, the harder it is to look at.

Which object is easier to look at?

We’re Conditioned for Rounded Corners

Another explanation on why we have an eye for rounded corners is because they’re more organic to how we use everyday objects in the physical world [3]. Rounded corners are everywhere. And as children, we quickly learn that sharp corners hurt and that rounded corners are safer. That’s why when a child plays with a ball, most parents aren’t alarmed.

But if a child were to play with a fork, the parents would take the fork away for the fear of the child hurting itself. This provokes what neuroscience calls an “avoidance response” with sharp edges. Thus, we tend to “avoid sharp edges because in nature, they can present a threat” [4].

Which object would you trust with your child?

Rounded Corners Make Information Easier to Process

Rounded corners are more effective for maps and diagrams because they allow our eyes to easily follow lines “as it suits better to the natural movement of the head and eyes respectively” [5]. Sharp corners throw your eyes off the path of the line so you end up experiencing abrupt pauses when the line changes direction. But with rounded corners, the line leads your eyes around each corner to continue along the path smoothly.

Which diagram is easier for your eyes to follow?

Rounded corners also make effective content containers. This is because the rounded corners point inward towards the center of the rectangle. This puts the focus on the contents inside the rectangle. It also makes it easy to see which side belongs to which rectangle when two rectangles are next to each other.

Sharp corners point outward putting less focus on the contents inside the rectangle. They also make it hard to tell which of the two sides belong to which rectangle when two rectangles are next to each other. This is because each rectangle side is exactly a straight line. The sides of a rounded rectangle are unique because the lines curve towards the rectangle it belongs to.

Final Thoughts

There are more to rounded corners than meets the eye. Rounded corners are not only easier for our eyes to process, but they also make information easier to process. There’s no doubt that rounded corners are appealing. But these extra reasons make them even more appealing to use. When you talk to a client about rounded corners, you’ll now have something more to say than it just looks good.

References

[1] Realizations of Rounded Rectangles

[2] Corner salience varies linearly with corner angle during flicker-augmented contrast

[3] Why Do We Love Rounded Corners?

[4] NeuroFocus Study Reveals What Went Wrong With the Gap’s New Brand Logo

[5] FMC Visualization Guidelines


Book

Affiliate

elegant wordpress themes

This Post Has 76 Comments

  1. agentfin Reply

    Wish I could find it now, but Frito-Lay did a delightful study on how rounded endcaps [those displays at the end of supermarket aisles] were more appealing to women. But wait, what was the reason WHY?!?

    Because sharp corners reminded women of hot oven doors.

    Perhaps more of us are afraid of hot oven doors than Frito-Lay realized. Or maybe the reason that women are able to avoid this hazard of the kitchen is not due to an innate understanding of ‘hot ovens’ but instead our brain’s dislike and mistrust of sharp angles.

    Sharp things hurt. So do corners. So, um. Watch out, yo.

    ps. In case my tirade on how much I appreciate the depth of understanding this article plumbs was not obvious: THIS RESEARCH IS RAD.

    thanks for making this a human issue, rather than some women/oven affinity factor.

    • Genn Pinnick Reply

      Nice tirade. Yes, I think perhaps the hot corners and sharp corners did have some overlap for some generations of women, but as a whole, many of us have also experienced the thigh-level bruise from too narrow of a path between sharp-corned tables at cafes, restaurants, etc. ad we know “SHARP CORNERS BAD”.

      Still, enjoyed the tirade. Please, do it again. Intelligent humor is always amusing.

  2. Eric Scheid Reply

    Rounded corners for connecting lines in diagrams also help to disambiguate where the lines are going (and help to discover some bizarro connection problems like you have in your diagram .. A does not flow directly to C??).

    That said, while I do use rounded connecting lines in my site maps I retain the squared corners for the boxes. The contrast is an aid to distinguishing which straight edge black line is a connector, and which is an object being connected.

    • Pito Salas Reply

      I don’t think the rounded corner version of the org chart diagram is better. It’s worse. It visually implies that the A-B relationship is more important than the A-C relationship. Not a good example of the principle.

      • Trip Reply

        As a non-professional, that was my immediate reaction too.

        • Eric Scheid Reply

          Have you considered that perhaps the A-B relationship actually is less important than the A-C one, or maybe there isn’t an A-C relationship at all. To me, that diagram is saying that A goes to B, and then B goes to C.

          • Oliver

            I agree, bad comparison on that example. It should be fixed with a rounded corner going the other way as well. Unfortunately that adds more visual noise and confusion rather than remaining simple with a straight line.

    • Henrik Reply

      Nice to read this article – uxmovement gives us great articles overall.

      About the diagram where A seems to lead to B – this is an example on how to fix it 🙂

      http://postimage.org/image/aqvkw649n/

  3. Suffiyan Reply

    Join the conversation thread on the Facebook Group for User Experience called ‘YouX – UX for You’ … Ur article is the topic for the day 🙂

  4. Wayne McManus Reply

    Good read and nice examples

  5. Tim Reply

    Pretty sure those two flow-charts are not equivalent. The rest of your examples are all fine and I pretty much agree. But rounded versus sharp corners have specific connotations in certain areas and flowcharts is one of them.

  6. Danil Reply

    I’m not impressed by the “sharp edges all around” example; if you want to be making the case that rounded corners help, then the complement should be a the crazy zig zag star with the points rounded off.

    I suspect that proposed shape would also be hard to look at.

  7. Udegbunam Chukwudi Reply

    Hmmmmm. Nice theory. I’ll be testing out with my adsense image ads to see if rounded edges positively or negatively affect the CTR 🙂

  8. Victor Reply

    curious though, your comment boxes don’t have rounded corners.

    i’m not going to say that it made a great difference for me.

    i guess it’s all relative…

  9. john felts Reply

    i disagree. my round belly is not helping me get chicks.

  10. Jeffrey Reply

    I dunno… some of the examples are pretty extreme. Comparing scissors to a beach ball is like comparing an active volcano to a swimming pool, asking “which one would you rather be submerged in?” and concluding that people prefer cool to warm.

    I also think that curved lines in flow diagrams will create bias, so that’s not very useful – regardless of how much easier on the eyes it may be. overall, this is interesting food for thought, but not nearly as concrete as it’s presented.

    • anthony Reply

      I agree that the scissors is not the best example to use because it has sharp blade. I have changed the scissors to a fork, but the premise still holds – we tend to avoid sharp corners because growing up we have associated sharp objects with pain and danger.

      • Mike Reply

        Fork vs. Beach Ball is still a pretty far stretch. Perhaps, Fork vs. Spoon/Spork would be more realistic. They both kitchen utensils, made of the same material and still hold the sharp vs. rounded argument. However, I don’t think any parent would choose one over the other when it comes to a toddler/child playing with either, since we’re conditioned not to play with silverware, so I suppose this argument is fairly moot with these examples.

        • Dan Eastwell Reply

          Anthony – you’re a scientist, change one parameter if you’re testing/comparing. Your example should be a rounded cornered table vs a sharp cornered table. Bringing children into it is needlessly alarmist for an article with a solid foundation – you’re not concerned with children’s responses to corners in interface design.

          • Nathan

            I agree Dan. Whilst I appreciate the thought behind this it reads as if the conclusion has been made before the research and the article written to match.

            Comparing forks and beach balls? What about comparing a cardboard box and a cannon ball? Which does your child prefer to play with?

            To successfully argue this point, I think you need to challenge your preconceptions. If corners are bad and to be avoided etc, why are they still used so often in packaging, architecture etc? (I’m not answering it here for you and its likely due to cost efficiency over anything else) but the fact that you haven’t challenged your own thinking feels like the perfect opportunity for a follow up article.

    • DeD Reply

      Jeffrey point is extremely important. The author is not comparing two similar shapes and concluding the round is preferable. He is comparing a complex shape with a simple one.

    • agentfin Reply

      I’m interested that no one has been talking about the implied movement that the rounded connectors on the flowchart include. Certainly, informed choice is important. Always using squared off sharp corners is lazy, as is always using rounded corners. A careful reading of intended connections as well as some pretty damned basic A/B testing will result in stronger, more meaningful design.

      Personally, I am very glad that my knife company has not taken “sharp corners bad” as dogma. I find their knife designs aesthetically pleasing as well as utile.

      Another point [hehe] . . . the circle vs star is not a ‘pointy/round’ issue, but one of noise. The points all form an implied circle. If that circle is the information that needs to be communicated, then a circle should be drawn. If the point is to draw a star, then a circle will be an incorrect portrayal.

  11. dmitri Reply

    Wow, totally makes sense!

    And the funny part is that form on this site for leaving a comment uses a sharp corners! 🙂

  12. Hoopz Reply

    People should not just be talking about how things should be rounded, but also *how* things should be rounded. And it doesn’t just apply to shapes, it applies to e.g. animation timing curves and gradients as well.

    Our eyes emphasize all discontinuities, whether it be shape, velocity, curvature or luminance. As a designer, it is your job to smooth them out.

    Unfortunately, this requires a basic understanding of calculus to truly grok.

    • Ned Horvath Reply

      Actually, as a designer your job is to smooth out what should flow and draw attention where it needs to focus. Don’t ask me to pick the marshmallow-shaped tiger out of a pile of marshmallows.

  13. Rishi Reply

    this is an awesome blog post. The organizational diagram with rounded corners blew my mind.

  14. Pablo Reply

    I agree with @Jeffrey on both points, but will add that I prefer the non-rounded corner flow diagram in the example. The straight lines are easier to process because, as pointed out, the curves create unwanted bias. The burden is then on the viewer to filter out the curves in order to interpret the diagram flow.

    I do agree however with the other ideas in general that a curved box is easier on the eye. But the flow diagram was not a great example.

  15. Harry Feltersnatch Reply

    This website only has rounded corners on this button below.

  16. Greg Reply

    Using Firebug to make the comment boxes have rounded corners (say 10px radius) does feel easier on the eye strangely enough! 😉

    Adding a slight shadow also makes it easier……I’ll stop redesigning your site now, because at the end of the day, what do I know!

  17. Patent Advisor Reply

    You should patent this.

  18. Mentis Reply

    We want rounded corner table tennis. Not because it is better to play, but because it is easy on eyes of spectators.

  19. Matt Willett Reply

    Google could take not of this for pretty much all of their user interface design.

    Just a little bit of care for all those sharp edges would make my eyes feel good!

  20. Bevan Reply

    Agree with Jeffrey – the beach ball vs scissors is not really helping the argument here. Maybe we are predisposed to chose soft items over hard items. Change the scissors to a piece of foam cut in the shape of scissors and the rhetorical question no longer makes the point…..so to speak.

  21. frank Reply

    That starburst at the beginning of the article is vibrating like all hell, while the circle is just sitting there. Hard to take my eyes off the burst. I get the inoffensive, safe component to curves but where appropriate those spikes scream “Look at me!”

  22. Gif Reply

    The rounded path is worse as it promotes your eye to choose B because of the path. The proper UX would be for both B and C do have equal chance of being next, but the rounded one is misleading

  23. person287 Reply

    Totally agree. I just started putting ads on my website and I started off with just the normal squares, and they looked really ugly. When I changed them to just slightly rounded corners they started to look a lot better. You can see at http://mediamonstrosity.com/#ads , and that way I don’t think they look too bad.

    Ed

  24. Chris Reply

    hard corners also take more implicit resources because every time a line ends abruptly, we must decide if that line is blocked by a closer object (meaning the line actually continues) or if does actually bends 90 degrees and go the other way.
    It’s an awful idea to use non-rounded rectangles if the background color isn’t different.
    This is explained perfectly in the book Visual Intelligence by Donald Huffman.

  25. Eben Visher Reply

    Thanks! I really enjoyed your article. Thanks for doing the work of creating it.

  26. Don Reply

    Apparently Steve Jobs had this insight in 1981.

    http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt

    Steve suddenly got more intense. “Rectangles with rounded corners are everywhere! Just look around this room!”. And sure enough, there were lots of them, like the whiteboard and some of the desks and tables. Then he pointed out the window. “And look outside, there’s even more, practically everywhere you look!”

  27. AJ Reply

    I did find the org chart example opposite to what the author conveys. I found the rounded corner one to be misleading that one child has more weight over the other.

  28. Pete Reply

    The flowchart example only needs to be redrawn so that the junction is symmetrical (resembling a curly bracket “{” rotated 90° clockwise) and the bias of A to B would be removed making the two diagrams equivalent again.

  29. Matthew Frederick Reply

    Flowchart example with bias-free connections:

    http://imgur.com/omqex

  30. Marie-Pier Reply

    Great article. I wonder if round or sharp edge corners are perceived the same way for humans living in tribes (Papua New Guinea for exemple) than ones living in industrialized area.

  31. Brian B Reply

    I think another factor is that we use our eyes to perceive these objects, and as stated before, sharp edges are pointy and can cause rips and tears.

    Considering how delicate and gentle (gelatinous) our eyes are, the very thought of looking at something which could injure such an important organ on the human body may cause rejection.

    Possibly a self-defense mechanism of the eye?

    Just a thought…

  32. Maayan M Reply

    deciding between rounded or not rounded corners should be related to content – to the atmosphere your website is giving the user.

    so I agree in general with the associations to rounded and not rounded corners, but not to the “always choose rounded corners” or “rounded corners – good, not rounded – bad” notion i’m getting from this article.

  33. me Reply

    Yeah, I remember how the Facebook people LOVED rounded corners… NOT.

  34. Alessandro Mingione Reply

    Unfortunately this is just pure theory, it would be cool to make an experiment!

    • anthony Reply

      No, it’s not pure theory, it’s pure truth. There are research studies that justify the claim that you can find in the references section at the bottom of the article.

  35. Long Reply

    This is comparing apples to oranges. The designer should be knowledgable enough to understand what fits the design and the concept the best at the moment. It’s almost unnecessary to write an article to talk about corners.

  36. Jonathan Reply

    I wish I could read these great comments but I can’t focus on them because of their straight edge containers! :p

    Good article with good points. But in the end, straight edge has its place and rounded edge has its own place. There is no end all be all.

  37. bah Reply

    And another design article full of opinions being pushed as facts. When something is “in” like rounded corners, you all will do anything to justify it.

  38. DaemonK Reply

    Thanks for a great post.

    However, I wouldn’t say that round corners are always better. Just look at Microsoft’s Metro UI. It’s clean and beautiful, while many of its elements (along with the basic ‘grid’ of tiles) have sharp corners.

  39. Paul Hudson Reply

    Brilliant! This sort of analytical detail where design can be examined in the minutiae is exactly why I’m so passionate about this industry.

    Great job!

  40. Will Drotar Reply

    Do you have any examples of high-content websites that use rounded elements and borders effectively? Most of the high traffic sites are still very synthetic and straight-laced with box frames.

    It looks great but it’s hard to make it subtle and not distracting.

  41. jack Reply

    Sometimes adding rounded corners makes such a huge difference I surprise myself. it’s amazing what a little thing can do.

  42. DesignToads Reply

    I feel like I’m seeing less and less rounded edges and more squares in websites. Do rounded edges look a little, “2005” to anyone else?

  43. Just-for-thought Reply

    Imaging designing a new car with sharp corners…if people avoid these maybe we would have car accidents anymore. Problem would be no one would buy one due to people preferring rounded corners…then again Volvo butter boxes are still on the road.

  44. Brain Reply

    I can see the advantage of rounding boxes on a button, else where is design and functionality. We can not eliminate sharped corners if we want to stack boxes, rounding corners will create instability. So the article refers to digital design not real world design, therefore comparing scissors to balls or forks is kind of out of scope here. I think therefore I exists… I think.

  45. snort Reply

    Just wanted to point out that the first two diagrams are not necessarilly semantically equivalent. If these are railroad diagrams, for instance, the rounded diagram indicates that something can move from A to B and from B to C, but not directly from A to C. This is very useful, but designers should recognize that subtleties like that can be very important, especially in technical diagrams.

  46. Michael Shelley Reply

    this is cool and exactly what we were all thinking. Sharp objects hurt. If it wasn’t for those pesky ie8 users we would all be so happy

  47. Alan S Reply

    I don’t think rounded edges are for looks only. Objects shaped with sharp edges like a rectangular iphone must be rounded or else it could poke your eyes out. Engineers will round an edge for safety reasons. If you look closely even the sharpest edge in most designs will be in reality rounded, not for aesthetic reasons, just for your safety.

  48. MatusT Reply

    If rounded corners are better than why did microsoft make everything rectangular in their Metro interface? They for sure have some UX/UI guys who know what they do and know about this(maybe even THIS article) and yet they choose rectangles, sharp corners everywhere. Can anyone explain?

  49. Simon Reply

    Which diagram is easier for your eyes to follow? I would say the one with the corners! Also, the diagram with the rounded corners infers that route a>b is more important than route a>c

  50. Anna Kitowska Reply

    I have to admit that the spoon vs fork example would work better (and cause less controversy) when it comes to the “what would you want your children to play with” example. The example with rounded/sharp-edged forms, however, was absolutely interesting.

  51. Regan Music Reply

    I agree with the diagram saying that rounded corners offer more information about where our arrow is trying to go, but i think the curve at the junction point is bad. It should cut straight in to the junction.

    The reason for this, I see the curve leading in to one side of the junction as an implication of bias. It says to me that for some reason the route to B is preferred over the route to C. The direct cut to the junction makes it quite clear that you could go either way. If you want to round it out in any way, i’d recommend placing a circle over top of the junction point or rounding the inner corners on all concerning sides.

  52. Dalakyne Reply

    Am I the only one who prefers sharp over round? I like the straight, sleek lines, the clean look, over wobbly fat looking stuff.

  53. Preston Daniel Reply

    Wow! This is really insightful! I definitely need to run some remote user testing on an array of designs with and without rounded corners.

    Another interesting post that talks about rounded corners in design are these guys: https://designmodo.com/rounded-corners/

    Thanks for sharing!

  54. Holo Reply

    I can’t stand rounded corners at all! Especially if overused so damn much. The hard edged boxes around the comments here are beautiful, DO NOT apply border-radius to them.

    The fact that Microsoft almost exclusively uses sharp edges on rectangles shows I can’t be the only one who thinks they are better than round ones.

  55. Ruben Reply

    This trend needs to go away, it’s just dribbble designers copying each other and someone cherry picked a bunch of articles to sound like an expert. The dribbblification of UX.

    I do appreciate all the effort and hard work you put into this but you’re overthinking. Cheers bro not my cup of tea.

  56. Ramy Reply

    Nice article, found some of the references interesting too, thanks a lot!

Leave a Reply to Henrik Cancel reply

Your email address will not be published. Required fields are marked *