Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

Advanced border-radius

If you want to specify different sizes for each corner, you can apply directions to the border-radius property as shown below.

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

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

Setting the border-radius value as %(percentage) can create circular or elliptical corners.

For instance, setting the border-radius value to 50% will result in the element's corners being rounded to 50% of the element's width.

In other words, the element becomes circular.

Using % for border-radius values
.box {
  border-radius: 50%;
}

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

For a profile image used on a website, the profile-image class is given a border-radius property with a value of 50%, turning the image into a circle.

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.