CSS3 border-radius

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%;