CSS3 border-radius property is used to round the corners of any HTML element (p, h1, div, img) etc. Value of border radius can be given in pixel or in percent.
Syntax: border-radius: 20px;
Example 1: Round the div corners.
If you specify only one value in the border-radius property, then it will be applied to all four corners. However, you can specify each corner value separately or different values of all corners, like this:
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
You can apply border-radius property like this:
1. Four values - first value applies to top-left, second value for top-right, third value for bottom-right, and fourth value for bottom-left corner.
border-radius: 15px 50px 30px 5px;
2. Three values - first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right.
border-radius: 15px 50px 30px;
3. Two values - first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner.
border-radius: 15px 50px;
4. border can also be given as [horizontal radius] / [vertical radius];
border-radius: 50px/15px;
5. border-radius: 15px/50px;
6. border-radius: 40px/100px;
7. border-radius: 50%;