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.