CSS border-radius Property
CSS border-radius property sets the corner radius for element.
border-radius for the four corners can be specified in different ways. We shall go through each of them with examples.
border-radius with four values
border-radius: 5px 25px 45px 65px;
where the order of corner radii is top-left, top-right, bottom-right, and bottom-left respectively, as shown in the following.
border-radius: 5px 25px 45px 65px;
/* top-left top-right bottom-right bottom-left */ Example
If border is specified , then the border also gets the radius applied.
Example
border-radius with three values
border-radius: 5px 25px 45px;
where the order of corners is top-left, top-right, and bottom-right respectively. For bottom-left, the value for top-right is considered, as shown in the following.
border-radius: 5px 25px 45px;
/* top-left top-right bottom-right */
/* bottom-left */ Example
border-radius with two values
border-radius: 15px 55px;
where the first value is for top-left, and bottom-right; and the second value is for top-right, and bottom-left respectively, as shown in the following.
border-radius: 15px 55px;
/* top-left top-right */
/* bottom-right bottom-left */ Example
border-radius with one value
border-radius: 25px;
where the specified value is set as radii for all corners: top-left, top-right, bottom-right, and bottom-left, as shown in the following.
border-radius: 25px;
/* top-left */
/* top-right */
/* bottom-right */
/* bottom-left */ Example
Two border-radius values for one corner
We can also specify two radius values for a corner. As a result, we have an angularly asymmetric corner.
border-radius: 25px / 50px;
Example
Conclusion
In this CSS Tutorial, we learned about border-radius property, and how to use this property for HTML Elements, with examples.