Try It

Currently Active Property:

border-radius: 10px;

Syntax:  

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Property Values:

• length: It represents the shape of the corners & the default value is 0.
• percentage(%): It represents the shape of the corners in %.
• initial: It is used to set an element’s CSS property to its default value.
• inherit: It is used to inherit a property to an element from its parent element property value.

Shorthands:

• Apply Radius value to all four corners:

border-radius: value; 

• Apply value1 to top-left and bottom-right corners and value2 to top-right and bottom-left corners:

border-radius: value1 value2; 

• Apply value1 to top-left corner, value2 to top-right and bottom-left corners and value3 to bottom-right corner:

border-radius: value1 value2 value3; 

• Apply value1 to top-left corner, value2 to top-right corner , value3 to bottom-right corner and value4 to bottom-left corner:

border-radius: value1 value2 value3 value4;

The 4 values for each radius can be specified in the following order as top-left, top-right, bottom-right, bottom-left. If the bottom-left is removed then it will be the same as the top-right. Similarly, If the bottom-right & top-right will be removed then it will be the same as the top-left & the top-left respectively.

CSS border radius is used to round the corners of the outer border edges of an element. This property can contain one, two, three, or four values. The border-radius property is used to set the border-radius. This property is not applicable to the table elements when border-collapse is collapsing.