border-radius CSS

Definition and Usage

The border-radius property is used to add rounded corners to any element. You can define the radius for each corner.

This property can have one to four values. Below are all the four possibilities:

border-radius: 15px 50px 30px 20px; /* Four values */
1st value (15px) is for the top-left corner, 2nd value (50px) is for the top-right corner, 3rd value (30px) is for the bottom-right corner and 4th value (20px) is for the bottom-left corner.

click me

border-radius: 15px 50px 30px; /* Three values */
1st value (15px) is for the top-left corner, 2nd value (50px) is for the top-right & bottom-left corners and 3rd value (30px) is for the bottom-right corner.

click me

border-radius: 15px 50px; /* Two values */
1st value (15px) is for the top-left & bottom-right corners and the 2nd value (50px) is for the top-right & bottom-left corners.

click me

border-radius: 15px; /* One value */
The only one value (15px) is for all the four corners.

click me

Browser Support

The numbers in the table below specify the minimum version of the browser required to fully support this property. -webkit- or -moz- specify the minimum version which worked with a prefix.