CSS Border Radius Examples
border-radius: 35px; sets the border-radius of each corner. It is the combination of four properties: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius. It sets all corners to the same value.
Example 1: This example illustrates the border-radius property whose value is specified by the single value.
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>w3wiki</h2>
<p>border-radius: 35px;</p>
</div>
</body>
</html>
Output:
border-radius: 20px 40px; sets first value as top-left and bottom right corner and second value as top right and bottom left corners.
Example 2: This example illustrates the border-radius property whose value is specified by the double values.
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-radius: 20px 40px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>w3wiki</h2>
<p>border-radius: 20px 40px;</p>
</div>
</body>
</html>
Output:
border-top-left-radius: This property is used to specify the radius of the top left corner of an element.
Example 3: This example illustrates the border-radius property where the property value is applied for the top left corner of an element.
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-top-left-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>w3wiki</h2>
<p>border-top-left-radius: 35px;</p>
</div>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome 4.0
- Internet Explorer 9.0
- Microsoft Edge 12.0
- Firefox 4.0
- Opera 10.5
- Safari 5.0
CSS border-radius Property
CSS border radius is used to round the corners of the outer border edges of an element. This property can contain one, two, three, or four values. The border-radius property is used to set the border-radius. This property is not applicable to the table elements when border-collapse is collapsing.