border-radius is a CSS property that defines the radius of the corners of an element.
It gives a rounded shape to the corners of an element’s outer border edge. The values of the border radius can be declared in percentages or length units.
The image below shows the different corners of an element.
border-radius: num_px percentage;
num_px: This is the number of pixels you want for the radius.
percentage: This is the percentage you want the border to be edited.
You can also use the
border-radius property can have one to four values.
The corners are rounded depending on the value passed into the property.
We have stated the range of values that can be declared, so let’s move on and see how it works.
When you pass in one value into the
border-radius, it rounds all the corners of your elements equally.
When you pass two values into the
border-radius property, the first value will be used for the top-left and bottom-right corners.
The second value will be used for the top-right and bottom-left corners.
For three values, the first value is used for the top-left corner.
The second value is used for the top-right and bottom-left corners, while the third value is used for the bottom-right corner.
When four values are declared, the first value is used for the top-left corner, the second value for the top-right corner, the third value applies to bottom-right corner and the fourth value applies to bottom-left.
View all Courses