Border radius in buttons. Rounded or Not?

Shall I use buttons with rounded or sharp corners in my design? That's a common question, but does not come with a fixed answer. Despite our natural preference for rounded corners, the button radius needs a multi-angled consideration.

This is not an in-depth investigation on button design and conversion optimisation. And the concepts here are universal, despite the fact that they are used in the context of Elementor.

This article will bring up some vital factors that you should consider while taking the -almost archetypical- decision of the round-ness of your buttons. These are:

  • Knowing what research tells us
  • Making sure that the buttons resonate with the brand
  • Define the purpose of our buttons

Common button shapes

In Elementor, we style buttons as standalone widgets, or as part of molecule-level elements like Call to Action, Slider and Contact Form.

We will categorize the buttons in:

  • Sharp buttons – have no border radius
  • Soft rounded buttons – have a border radius of relatively low value
  • Rounded buttons – are fully rounded with a radius of 99px

Below is a section with button elements in these three common shapes.

No border radius

low-value border radius (8px)

99px border radius

What research tells us about shapes

The contour bias

As human beings, we have a preference for rounded shapes, and this is called the Contour Bias which is explained in the book Universal Principles of Design. Sharp objects trigger a region of our brain called the amygdala, which is related to fear response. Since by nature we feel a threat for sharp and angular objects, we tend to perceive rounded objects as more friendly.

Rounded shapes are easier to the eye

Additionally, this article includes a couple of more reasons why rounded shapes work so well. “Rectangles with rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process”.

Quoting from the same article: “Rounded corners also make effective content containers. This is because the rounded corners point inward towards the center of the rectangle.”

This information is very useful in the context of Card layout grids, as we will explore below in the section for secondary buttons.

Different shapes trigger different emotions

So many good things about rounded corners. 

However, this does not mean that just by using rounded buttons we will ht our goal once and for all. Quoting again from Universal Principles of Design:

“Angular objects are more effective at gaining attention and engaging thought, contoured objects are more effective at making a positive emotional and aesthetic impression.”

Obviously, different button shapes trigger different emotions, and our job is to define what these emotions need to be and find creative ways to communicate them through the design of our buttons in a balanced way.

Button shape should be brand-consistent

First things first. Is the shape your buttons in-tune with your brand and niche, or it feels a bit off? That’s a question only you can answer.

If you do a research on a specific niche, you will discover that for each one of them, there is already a commonly used stylistic approach, as if each niche would imply a compatible brand style.

In Construction companies for example, you will usually find brand styles that express a sharp, heavy-duty look and feel, which is rough and structured. In this case, the brand justifies and might actually dictate the use of sharp corners. 

Angled corners feel more  “compatible” by default, and “resonate” with the concept in a more efficient way.

Extracting button shape from logo

You will ideally have some visual clues to extract a radius direction from the brand logo. Is it highly geometric? Is it overly rounded? If you have a very clear answer for any of these questions, you already have a clue on a compatible radius that you can use for your buttons.

Dribbble shot by Bohdan Harbaruk

For this geometric logo, I created a sharp button.

Dribbble shot by Aleksandr Scorolitnii

A super-sharp logo leaves room for experimenting with both round and sharp approaches, working equally well.

I'd go for rounded buttons here for sure 🙂

For this geometric logo, I created a sharp button.

Super flexible. You could definitely try both sharp and rounded.

A sharp button is consistent with this structured logo.

But perhaps I could integrate some of these round logo dynamics into the button.

Define the purpose of your buttons

Ideally, we want to keep all our buttons relatively consistent in border radius, but depending on the context (or if you prefer, the button type) we may require a special treatment.

Call to action buttons

The primary target of your CTA button is to drive attention and encourage a click. You can contribute to both of these via contrast between the button element and it’s surroundings.

For proper button styling, do not forget the importance of color contrast. This article is a great read on the topicCall to action Buttons: Color vs contrast

Back to our subject, round buttons have a good reputation around the internet as the go-to shape for Call to Action.

It is definitely not a rule, but it is true that their round nature makes them flexible and “compatible” by default with many design styles. 

Usually a round button will work well as a main Call to action, even when used in a very sharp and geometric design context, like in the section below. 

A call to action section with a round button

This “compatible inconsistency” between the roundness of our button and the sharpness of the surroundings, results in a desired contrast that will:

  • Drive more attention to our button
  • Communicate a good mix of friendliness with action-taking momentum

This justifies why in the logo examples above, the round buttons worked equally well with very angular and sharp-shaped logos.

Secondary buttons

Secondary buttons need to be there, accessible and easy to be scanned. Yet, they must not consume the whole bandwidth of the user’s attention.

Apart from any color considerations, when you are defining the styles for your secondary buttons in the context of a card-based grid, a border radius works well. Just make sure to use a radius value that is consistent with the border radius of your cards.

For example, avoid to use a 4px radius for your card and 8px radius for the card buttons. Try to keep a relative consistency between these radius values.

I AM A CARD TITLE

Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

I AM A CARD TITLE

Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

I AM A CARD TITLE

Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

I AM A CARD TITLE

Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

Form buttons

Form buttons should follow your overall brand-consistent button shape, and it is a good idea to double check that the radius of your form fields is also consistent with the radius of your buttons, like we did above for the card buttons.

In the case when your form button is also your main call to action (for example in a sign up page), you can still experiment with contrasting corner shapes between your button / form fields / layout geometry as we did in the Call to Action buttons section above.

A round button with sharp fields works well, especially if it is a Call to action button.

A round button which is consistent with the round form fields also works well.

If you use soft-rounded fields (for example 6px), it is a good idea to use the same soft-rounded radius for the form button as well.

Avoid mixing soft-rounded fields with completely square or round buttons.

Wrapping up

First, find the consistency in your elements, and then see how you can break the rules but still maintain the compatibility.

You must have already realised that there is not an answer on wether you should  use rounded corners in your elements. Context is what matters. And context is the result of the overall stylistic and emotional approach you are following with brand style and tone, your messaging and eventually your design system.

Between all these variables, there is a sweet spot for your radius, and it is your job to discover it 🙂

Want cool Elementor Design tips in your inbox? Sign up to the mailing list.

  • Easy to follow design tactics
  • Tutorials, courses and workflows
  • Curated lists of resources