Skip to main content
Practice

Advanced border-radius

If you want to specify different sizes for each corner, you can do so by assigning directions to the border-radius property.

For example, the CSS code below applies a 10px rounded corner to the top left corner and a 20px rounded corner to the bottom right corner of an element with the class box.

Applying border-radius to specific corners
.box {
  border-top-left-radius: 10px; /* Top left corner */
  border-bottom-right-radius: 20px; /* Bottom right corner */
}

By specifying %(percentage) as the value of the border-radius, you can create circular or elliptical corners.

For example, if you set the border-radius value to 50%, the corners will be rounded by 50% of the element's width.

This means the element will be circular.

Using % as a border-radius value
.box {
  border-radius: 50%;
}

The CSS code above makes all corners of the element with the box class round, creating a circular shape.

The profile-image class used for profile images on a website sets the border-radius property value to 50% to make the image circular as shown below.

Making a profile image circular
.profile-image {
  border-radius: 50%;
}

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.