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.
.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.
.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.
.profile-image { border-radius: 50%; }
Lecture
AI Tutor
Design
Upload
Notes
Favorites
Help