CSS Fundamentals: border-radius

Timothy Robards
3 min readDec 26, 2022

The CSS border-radius property defines the radius of an element's corners. We can use this property to add rounded corners to our elements! It’s often used for buttons, images, and more advanced CSS shapes. Let’s dive a little further into this useful property…

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page

Typically, border-radius takes from one to four values, and the order in which the values are specified determines which corner each value applies to.

Here is an example:

.my-element {
border-radius: 15px 50px 30px 5px;
}

Note that the values are applied to each order in the following order: top-left, top-right, bottom-right, and bottom-left.

This would give the top-left corner a radius of 15px, the top-right corner a radius of 50px, the bottom-right corner a radius of 30px, and the bottom-left corner a radius of 5px.

You can also specify the radius for each corner individually, using the following properties:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

For example:

.my-element {
border-top-left-radius: 15px;
border-top-right-radius: 50px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 5px;
}

This would achieve the same result as the previous example.

The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

Creating shapes with border-radius

You can also use the border-radius property to create shapes such as circles or ellipses.

To create a circle, set the radius to a value that is equal to or larger than the width or height of the element. For example:

--

--