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
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:
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:
This would achieve the same result as the previous example.
border-radius property is actually a shorthand property for the
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: