CSS border-radius property

CSS border-radius

CSS border-radius property is a short hand property, it is used to add rounded corners in the border.

It is used to specify the radius of the border.

It can have from one to four values, each one for each corner.

If one value is specified, it will be set for all the corners.

border-radius consists of following shorthand properties

  • border-top-left-radius : It is used to specify the top left radius.
  • border-top-right-radius : It is used to specify the top right radius.
  • border-bottom-right-radius : It is used to specify the bottom right radius.
  • border-bottom-left-radius : It is used to specify the bottom left radius.

Example

Try Yourself

In the above example values used in border-radius property are,

60px - border-top-left-radius

100px - border-top-right-radius

50px - border-bottom-right-radius

100px - border-bottom-left-radius


Example 1 - border-top-left-radius

Try Yourself

Example 2 - border-top-right-radius

Try Yourself

Example 3 - border-bottom-right-radius

Try Yourself

Example 4 - border-bottom-left-radius

Try Yourself