CSS border-radius Property

CSS border-radius property is used to make an element’s all four corners rounded. It is used to set the border radius for all four sides of an element in just one declaration.

The border-radius property is a shorthand of the below four properties:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

The border-radius can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also be specified in percentage(%).

The border-radius property can accept 1 to 4 values at a time. The different number of values affects the border radius of the four corners differently. Let’s discuss each in detail:

If only one value is specified:

• border-radius: val;

The same value(val) will be used for all four corners of the element. That is, the border-radius of all four corners will be exactly the same. Refer to the example below:

Example:

div{
  border-radius: 20px;
}

If two values are specified:

• border-radius: val1 val2;

The first value(val1) defines the border radius of the top-left and bottom-right corners and the second value(val2) defines the border radius of the top-right and bottom-left corners. Refer to the example below:

Example:

div{
  border-radius: 20px 40px;
}

If three values are specified:

• border-radius: val1 val2 val3;

The first value(val1) defines the border radius of the top-left corner, the second value(val2) defines the border radius of top-right and bottom-left corners and the third value(val3) defines the border radius of the bottom-right corner of the element. Refer to the example below:

Example:

div{
  border-radius: 20px 40px 60px;
}

If four values are specified:

• border-radius: val1 val2 val3 val4;

The first value(val1) defines the border radius of the top-left corner, the second value(val2) defines the border radius of the top-right corner, the third value(val3) defines the border radius of the bottom-right corner and the fourth value(val4) defines the border radius of the bottom-left corner. Refer to the example below:

Example:

div{
  border-radius: 10px 20px 40px 60px;
}

Create a Circle Using border-radius

If an element has same width and height and if we set its border radius to 50%, It will become a circle. Refer to the example below:

Example:

div{
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

If element’s height and width aren’t same and border-radius is set to 50%, it will become an ellipse. Refer to the example below:

Example:

div{
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

CSS Syntax

The border-radius property has the below syntax:

border-radius: length|%|initial|inherit;

Property Values

The border-radius property accepts the following values:

General Info

Related Pages

CSS Tutorial: CSS Borders