CSS Rounded Corners: How to Increase Engagement With border-radius

When I was first learning front-end and design, I’d occasionally pick up on little nuggets of knowledge that instantly leveled up my work.

For instance, let me ask: Of the two buttons below, which would you rather click? Don’t think too much, just choose:

I’d put money on the button on the right. Upon closer inspection, you’ll see the only difference between the two is that the right button has nice, rounded corners.

In the same vein as all-caps words or the color red, sharp corners can put users on alert, even if they’re not fully aware of it. Why? My guess is that sharp things hurt — I don’t want to be reminded of stubbing my toe on the coffee table every time I click “add to cart.”

Rounded corners are calming, and therefore characteristic of just about any modern website you’ll see. It’s one of those details that immediately makes your pages and designs look more professional and sets you apart from beginners. So, in this post, let’s look at how to create them with HTML and CSS.

How to Make Rounded Corners in CSS

To create a rounded corners effect in CSS, we’ll use the CSS border-radius property. This property hides the sharp corner of an element as a circle. Here’s the syntax:

 element { border-radius: value }

Here, value is the radius of the circular corner and can be set in any valid unit (like px, em, rem, in, etc.) or a percentage. For this post, I’ll mostly stick to pixels.

Let’s start with a basic example of border-radius used on a div. I’ll give the div a length and width of 150px and a border-radius of 20px.

By increasing or decreasing the value of border-radius, I can make the rounded corners more or less prominent. I can even increase its value until the div becomes a circle.

Importantly, the element needs to either have a visible background color, have a visible border, or be an image in order for rounded corners to be visible.

Above, I used a div with a background color. Here’s what rounded corners look like on a visible border and an image. All divs in this example have a border-radius of 20px.

As mentioned, I can also use a percentage value with border-radius. The corner rounding will be based on the width and height of the affected element. If the element is a square, the rounding will be perfectly circular. If the element is rectangular, the rounding will be elliptical. See the example below:

Next, let’s explore how you can get more granular with the border-radius property.

css-border Values

In the above examples, I used only one value with border-radius. This determined the degree of rounding for all corners in the div.

However, border-radius can take up to four different values. Here’s how multiple values work with this property:

• If one value is included (e.g., border-radius: 20px;), all four corners are rounded the same amount.
• If two values are included (e.g., border-radius: 20px 45px;), the first value applies to the top left and bottom right, and the second value applies to the top right and bottom left.
• If three values are included (e.g., border-radius: 20px 45px 5px;), the first value applies to the top left, the second value applies to the top right and bottom left, and the third value applies to the bottom right.
• If four values are included (e.g., border-radius: 20px 45px 5px 75px;), the first value applies to the top left, the second value applies to the top right, the third value applies to the bottom right, and the fourth value applies to the bottom left.

Other CSS Rounded Corners Properties

We can also leverage other CSS properties to target individual corners of our element. The css-border property is a shorthand property for these four properties:

• border-top-left-radius sets the border radius of the top left corner.
• border-top-right-radius sets the border radius of the top right corner.
• border-bottom-left-radius sets the border radius of the bottom left corner.
• border-bottom-right-radius sets the border radius of the bottom right corner.

CSS Elliptical Corners

border-radius also lets you control the shape of the rounding itself. To do this, we can put a slash between two values. The first value specifies the horizontal radius and the second value specifies the vertical radius.

 
element { border-radius: horizontal-radius / vertical-radius }

Here’s an example of this in action with our orange square element.

CSS Rounded Corner Examples

Learning a new CSS property is always fun (okay, at least for me it is). But what about seeing it in action, in the wild? Let’s look at some real-web examples of how rounded corners influence a website’s UX.

Perhaps no button is clicked more often than the “Google Search” button on Google’s homepage. And wouldn’t you know it, it’s got rounded corners! The background color is faint, so it’s hard to see. But hovering over the button with my cursor, you can see some slight rounding.

Image Source

Technically, this button is an input element with the role of button. Without CSS, this element would have rounded corners applied, but there’s CSS on the page that overrides the default and applies its own rounded corners of 4px.

It’s hardly noticeable, but I’ll assume Google has its button design down to a hard science and knows that this small detail makes a difference in engagement.

We love our rounded corners at HubSpot, too. Here’s our homepage:

Let’s recreate the “Get a demo” and “Get started free” buttons. They both have a border-radius of 3px.

Again, it’s a very subtle design choice, but it affects users’ behavior.

Of course, buttons aren’t the only things with corners. And the more you look around, the more you’ll start to notice how much rounding has made its way into all kinds of elements. Take Airbnb’s website. Its listings page includes image cards with rounded corners.

Image Source

Or, consider other interactive page features like live chat. I love this sleek example from Mailchimp. In this and the Airbnb example, the rounding is more pronounced than the buttons we’ve seen.

Image Source

Round out your design skills with rounded corners in CSS.

Hopefully by this point, it’s clear how a simple CSS property like border-radius can improve your front-end design game. It’s so essential that front-end frameworks like Bootstrap include rounded corners in their elements by default. It’s just what we’re used to by now.

So, whether you’re using it for a button, a card, or another web element, chances are you’ll want this property in your back pocket for any project — I know I do.