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:
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:
| length | Specifies the radius of each corner in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can be 1 to 4 values. The default value is 0px. |
| % | Specifies the border-radius in percentage(%). |
| initial | Sets the border-radius property to its default value(0px). |
| inherit | Inherits the border-radius property from the parent element. |
General Info
| Default Value | 0px |
| Inherited | No |
| JavaScript Usage | element.style.borderRadius = “20px”; |
Related Pages
CSS Tutorial: CSS Borders
