The border-radius property in CSS is used to create rounded corners for HTML elements. It enhances the visual appearance of web pages by giving elements a smoother and more modern design.
- The property can accept one to four values to control each corner individually.
- It is commonly used to create rounded buttons, cards, and circular shapes.
- border-radius does not work properly on tables with border-collapse: collapse.
Syntax
border-radius: 1-4 length | % / 1-4 length | %|initial | inherit;Property Values
| Property Value | Description |
|---|---|
| length | Represents the shape of the corners, typically in units like px, em, or rem. The default value is 0. |
| percentage (%) | Represents the shape of the corners in percentage, where the rounding is relative to the element's size. |
| initial | Resets the element's CSS property to its default value. |
| inherit | Inherits the property value from the parent element. |
Shorthand Notations for border-radius
- Apply Radius value to all four corners:
border-radius: value; - Apply value1 to top-left and bottom-right corners and value2 to top-right and bottom-left corners:
border-radius: value1 value2; - Apply value1 to top-left corner, value2 to top-right and bottom-left corners and value3 to bottom-right corner:
border-radius: value1 value2 value3; - Apply value1 to top-left corner, value2 to top-right corner , value3 to bottom-right corner and value4 to bottom-left corner:
border-radius: value1 value2 value3 value4;The 4 values for each radius can be specified in the following order as top-left, top-right, bottom-right, bottom-left. If the bottom-left is removed then it will be the same as the top-right. Similarly, If the bottom-right & top-right will be removed then it will be the same as the top-left & the top-left respectively.
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: Rounded Corners for all Sides
This demonstrates how the border-radius property is applied to round the corners of an element. The border-radius: 35px; value rounds all four corners of the green box uniformly, giving it smooth, curved edges. The element is styled with padding, a fixed width, and height, along with centered text.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<!--Driver Code Ends-->
<style>
.GFG {
border-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-radius: 35px;</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
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: Rounded Corners with Two Values
Here, the border-radius property is set to two values, 20px 40px. The first value (20px) applies to the top-left and bottom-right corners, while the second value (40px) applies to the top-right and bottom-left corners. This results in asymmetrical rounded corners, creating a unique design for the element. The element also has padding, a fixed width, and height, with centered text.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<!--Driver Code Ends-->
<style>
.GFG {
border-radius: 20px 40px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-radius: 20px 40px;</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
Example 3: Rounded Top-Left Corner
Here, the border-top-left-radius property is applied to round only the top-left corner of the element with a value of 35px. The other corners remain unchanged, creating a smooth curve on the top-left side while the rest of the box retains sharp edges. The element is styled with padding, a fixed width, and height, with centered text.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<!--Driver Code Ends-->
<style>
.GFG {
border-top-left-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-top-left-radius: 35px;</p>
</div>
</body>
</html>
<!--Driver Code Ends-->