CSS – Border Radius for rounded corners

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

1

css border radius

css border radius

Above code fore border radius is equivalent to

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;

1

You can even have different horizontal and vertical rounding

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

1

Few other example:

1

Leave a Reply

Your email address will not be published. Required fields are marked *