CSS Fundamentals: border-radius

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