css - Rounded Corners Part 3: Using Percentages for Circular Shapes

How border-radius Works with Percentages

When you use percentages (%), the rounding scales are based on the element’s size.

Example 5: Perfect Circle

.circle {

  width: 100px;

  height: 100px;

  background-color: orange;

  border-radius: 50%;

}

Explanation:

border-radius: 50% creates a perfect circle, as long as width and height are equal.

This is commonly used for profile pictures, badges, and icons.

Example 6: Oval Shape

.oval {

  width: 200px;

  height: 100px;

  background-color: yellow;

  border-radius: 50%;

}

Explanation:

When width and height are different, a percentage border-radius creates an oval shape.