CSS - Border Radius for rounded corners

Border radius is used to create rounded corners  see the following.

[codepen_embed height=200 theme_id=1 slug_hash='emxdk' user='ianoop' default_tab='css' animations='run'/]

Above code fore border radius is equivalent to

border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

or

border-radius: 20px 20px 20px 20px;

You can specify rounded corners with different set of values.

One : only one value set for all four corners
border-radius: 10px

Two values : * top-left + bottom-right and top-right + bottom-right , diagonally
border-radius: 20px 30px*

Three values:  top-left ,  top-right + bottom-left ,  bottom-right
border-radius: 10px 30px 5px

Four values: top-left ,  top-right, bottom-right,  bottom-left
border-radius: 20px 10px 15px 30px;

[codepen_embed height=200 theme_id=1 slug_hash='logmL' user='ianoop' default_tab='result' animations='run'/]

You can even have different horizontal and vertical rounding

border-radius: 10px/30px /*Horizontal radius / Vertical Radius*/

[codepen_embed height=200 theme_id=1 slug_hash='amzfr' user='ianoop' default_tab='result' animations='run'/]

Few other example:

[codepen_embed height=200 theme_id=1 slug_hash='aqeBl' user='ianoop' default_tab='result' animations='run'/]