CSS3 border-radius

CSS3 border-radius property is used to round the corners of any HTML element like 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: 50%/30px;

5. border-radius: 40px/100px;

6. border-radius: 50%;