CSS border-radius property
The border-radius property in CSS is identified to round the corners of the outer border edge of any element. We may also set a single radius in order to make circular corners or two radii in order to make elliptical corners.
The radius property applies to the whole of the background even if the element is having no border. The exact position of the clipping is determined by the background-clip property.
Syntax for border-radius property:
Following is the syntax for the border-radius property.
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
CSS border-radius property values:
Let's see what values this property can have and what do those values do:
| Value |
Description |
| radius |
This value refers to a length or a percentage that denotes a radius to be used for the border in each of the corners of the border. |
| top-left-and-bottom-right |
This value refers to a length or a percentage that denotes a radius to be used for the border in the top-left and bottom-right corners of the border-box of the element. |
| top-right-and-bottom-left |
This value refers to a length or a percentage that denotes a radius to be used for the border in the top-right and bottom-left corners of the border-box of the element. |
| top-left |
This value refers to a length or a percentage that denotes a radius to be used for the border in the top-left corner of the border-box of the element. |
| top-right |
This value refers to a length or a percentage that denotes a radius to be used for the border in the top-right corner of the border-box of the element. |
| bottom-right |
This value refers to a length or a percentage that denotes a radius to be used for the border in the bottom-right corner of the border-box of the element. |
| bottom-left |
This value refers to a length or a percentage that denotes a radius to be used for the border in the bottom-left corner of the border-box of the element. |
Example: CSS border-radius property
Here in the example below, we are using the border-radius property with different border widths, margins, styles, colors, and their different values. In this case, we have given the border-radius value using the length values. This means that the radius of the border corner is rounded according to the specified border length values.
<!DOCTYPE html>
<html>
<head>
<title>Border-radius property in CSS</title>
<style type="text/css">
.border-box {
border-radius: 5px 4px 8px / 3px 5px;
width: 120px;
height: 120px;
}
div{
background-color: red;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight</div>
</body>
</html>
Output:
Example 2: CSS border-radius property
Here in the example below, we are using the border-radius property with different border widths, margins, styles, colors and their different values. In this case, we have given the border-radius value using the length values. This means that the radius of the border corner is rounded according to the specified border length values.
<!DOCTYPE html>
<html>
<head>
<title>Border-radius property in CSS</title>
<style type="text/css">
.border-box {
width: 120px;
height: 120px;
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
}
div{
background-color: red;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight</div>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
4 |
4 |
| Edge |
12 |
12 |
| Firefox |
4 |
4 |
| Internet Explorer |
9 |
9 |
| Opera |
10.5 |
10.5 |
| Safari |
5 |
5 |
| Webview Android |
37 |
37 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
11 |
11 |
| IOS Safari |
4.2 |
4.2 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for all the properties of the border-radius property is zero. This property is applicable to all elements. It is not an inherited property. Percentage values refer to the corresponding dimensions of the border-box container. The computed value for all the properties of the border-radius property is the two absolute lengths or percentages. The animation type for all the properties of this property is a length.
