CSS 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…

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:

.my-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* radius equal to half the width and height of the element */
}

This would create a circle with a radius of 50px as the radius is set to half the width and height of the element.

You can also use the border-radius property to create elliptical shapes by setting differing values for the horizontal and vertical radius. For example:

.my-ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%/25%; /* horizontal radius of 50% and vertical radius of 25% */
}

This would create an ellipse with a horizontal radius of 100px (50% of the width) and a vertical radius of 25px (25% of the height).

I hope this tutorial has helped you understand how to use the border-radius property in CSS.

Related Posts:

• Basic Selectors
• Pseudo-Classes
• Pseudo-Elements