CSS border-radius property
This CSS property sets the rounded borders and provides the rounded corners around an element, tags, or div. It defines the radius of the corners of an element.
It is shorthand for border top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. It gives the rounded shape to the corners of the border of an element. We can specify the border for all four corners of the box in a single declaration using the border-radius. The values of this property can be defined in percentage or length units.
This CSS property includes the properties that are tabulated as follows:
Property | Description |
---|---|
border-top-left-radius | It is used to set the border-radius for the top-left corner |
border-top-right-radius | It is used to set the border-radius for the top-right corner |
border-bottom-right-radius | It is used to set the border-radius for the bottom-right corner |
border-bottom-left-radius | It is used to set the border-radius for the bottom-left corner |
If the bottom-left value is omitted, then it will be same as the top-right. If the value of bottom-right is eliminated, then it will be same as the top-left. Similarly, if top-right is eliminated, then it will be the same as top-left.
Let’s see what happens when we provide a single value, two values, three values, and four values to this property.
- If we provide a single value (such as border-radius: 30px;) to this property, it will set all corners to the same value.
- When we specify two values (such as border-radius: 20% 10% 😉, then the first value will be used for the top-left and bottom-right corners, and the second value will be used for the top-right and bottom-left corners.
- When we use three values (such as border-radius: 10% 30% 20%;) then the first value will be used for the top-left corner, the second value will be applied on top-right, and bottom-left corners and the third value will be applied to the bottom-right corner.
- Similarly, when this property has four values (border-radius: 10% 30% 20% 40%;) then the first value will be the radius of top-left, the second value will be used for the top-right, the third value will be applied on bottom-right, and the fourth value is used for bottom-left.
Syntax
Property values
length: It defines the shape of the corners. It denotes the size of the radius using length values. Its default value is 0. It does not allow negative values.
percentage: It denotes the size of the radius in percentage. It also does not allow negative values.
Example
Output
Now, let’s see the border-radius for specific corners.
Example- border-top-left-radius
It sets the border radius for the top-left corner.
Output
Example- border-top-right-radius
It sets the border-radius for the top-right corner.
Output
Example- border-bottom-right-radius
It sets the border-radius for the bottom-right corner.
Output
Example- border-bottom-left-radius
It sets the border-radius for the bottom-left corner.
Output
We can specify separate horizontal and vertical values by using the slash (/) symbol. The values before the slash (/) is used for the horizontal radius and the values after the slash (/) are for the vertical radius.
There is an example given below using the slash (/) symbol.
Example
Output