How to create rounded corners in CSS (advanced guide)

If you’re reading this article and wondering, why I call it “advanced guide” because border-radius is amongst the very first css properties you learn even as a beginner coder, keep reading 😎 – I am going to be showing you, not how to create 3px rounded corners on a button, but to accomplish something like this:

CSS border-radius in action
CSS border-radius in action

Basics

As with everything in life, if we want to learn advanced stuff, it’s better to go through basics just to make sure everyone follows what’s comes next.

Syntax

As with any css property, border-radius comes with multiple variations, how to declare it:

div {
    //every corner of the div will be rounded
    border-radius: 5px;
}

div {
    //the above method id just a shorthand for this one
    //it is very similar to the margin property, (top, right, bottom, and right)
    border-radius: 1px 2px 3px 4px;
}

div {
    //you can specify radius of each corner separately 
    //you just combine top and bottom with left and right
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

Units

As with most of CSS properties, you can use from the very wide range of units to define the border-radius, for example, px, %, em, wv…etc.

Advanced

Here we go. I hope you refreshed all the basic of border-radius, let’s go to the advanced stuff.

“Two values” border radius

If you put only one unit declaration as a border-radius value, for example:

div {
    border-radius: 10px;
}

…you will get each corner with the same curves.

But, declaring two units as the border-radius value is not working like with margin and padding, that the first value applies to the horizontal and the second value to the vertical, with border-radius and the following code:

div {
    border-radius: 20px 80px;
}

…the values will apply as follows:

  • 1st value: top-left & bottom-right
  • 2nd value: top-right & bottom-left
"Two values" border radius
border-radius: Xpx Ypx

Looks interesting, huh? 😉

“Three values” border-radius

This one is very similar to the example above, with the difference that you can style a third column separately, for example, the following code:

div {
    border-radius: 8px 80px 25px;
}

…the values will apply as follows:

  • 1st value: top-left
  • 2nd value: top-right & bottom-left
  • 3rd value: bottom-right
"Three values" border-radius
border-radius: Xpx Ypx Zpx

Elliptical border radius

Also called border-radius slash syntax. It is not so common, but it allows you to set a horizontal and an elliptical radius of each corner. Sounds confusing? Look at the example below:

Elliptical border radius explanation
Elliptical border radius explanation

The official W3 spec says the following:

“If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.”

https://www.w3.org/TR/css-backgrounds-3/#border-radius

This syntax might be difficult to grasp at first, but what greatly helps is to imagine the the syntax we’ve been using up until now:

div {
    border-radius: 5px 5px 5px 5px;
}

…to imagine it as every value is basically “two values combined”, like for example

div {
    border-radius: 5px/5px (top-left) 5px/5px (top-right)  5px/5px (bottom-right)  5px/5px (bottom-left)
}

This is obviously incorrect definition, but helps to grasp, of how the horizontal and vertical border radius is calculated.

Syntax

The syntax of the elliptical border radius is as follows:

div {
    border-radius: 10px / 50px;
}

It makes use of a “/” or a “slash” (that’s why they call it “a slash syntax”).

With the above code you will get the following:

Elliptical border radius syntax
Elliptical border radius syntax

With elliptical syntax you can not only apply the rounder corners the same for the whole element, you can also style each horizontal and vertical corner separately. It can be accomplished with the following code:

div {
    border-radius: 25px 50px 75px 90px / 10px 10px 10px 90px;
}

The aforementioned example will give you the following result:

elliptical border radius, horizontal, vertical.
elliptical border radius. Horizontal and vertical.

Wrapping up

If you managed to get to this point, props to you! 🤘 For me personally, it took me quite a bit of my time to fully grasp how this works, even though I think of myself as an experienced developer who’s worked with css for almost a decade.

If you on the other hand understood it immediately, I congratulate you on this 👏 !

If you want to learn a bit more about the border radius property, follow the links to get more comprehensive information:

Or if you’d like to find out more of my articles on the topic of CSS, you can check out the whole bunch of articles from the archive.

And also if you liked the article, don’t forget to share it with people you like (or maybe people also you don’t like, maybe you’ll became friends! 😆 ).

I will be doing more articles like this in the future and if you want to get notified about them and anything else I release, subscribe to my newsletter right here.

Anyways, thanks for reading and I’ll see you in the next article! 🤓

Yours in coding,

Ivan