CSS border-radius Property - GeeksforGeeks

21 Oct, 2021
The border-radius property in CSS 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.
Syntax:  
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Property Values:
length: It represents the shape of the corners & the default value is 0.
percentage(%): It represents the shape of the corners in %.
initial: It is used to set an element’s CSS property to its default value.
inherit: It is used to inherit a property to an element from its parent element property value.
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.
border-radius: border-radius property can contain one, two, three, or four values.  
border-radius: 35px; It is used to set border-radius of each corners. It is the combination of four properties: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. It sets all corner to the same value.
Example: This example illustrates the border-radius property whose value is specified by the single value.
HTML
<!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>GeeksforGeeks</h2>         <p>border-radius: 35px;</p>     </div></body></html>
Output:
border-radius: 20px 40px; This property is used to set first value as top-left and bottom right corner and second value as top right and bottom left corners.
Example: This example illustrates the border-radius property whose value is specified by the double values.
HTML
<!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>GeeksforGeeks</h2>          <p>border-radius: 20px 40px;</p>      </div></body> </html>
Output:
border-radius: 20px 40px 60px; This property is used to set first value to top-left corner, second value applied to top-right and bottom left corners and third value applied to bottom right corner.
Example: This example illustrates the border-radius property whose value is specified by the triple values.
HTML
<!DOCTYPE html><html><head>    <title>Rounded Corners</title>    <style>    .GFG {        border-radius: 20px 40px 60px;        background: #009900;        padding: 30px;        text-align: center;        width: 300px;        height: 120px;    }    </style></head> <body>    <div class="GFG">        <h2>GeeksforGeeks</h2>         <p>border-radius: 20px 40px 60px;</p>     </div></body></html>
Output:
border-radius: 20px 40px 60px 80px; This property is used to set first, second, third and fourth value of border radius to top-left, top-right, bottom-right and bottom-left corners respectively.
Example: This example illustrates the border-radius property whose value is specified by the four values.
HTML
<!DOCTYPE html><html><head>    <title>Rounded Corners</title>    <style>    .GFG {        border-radius: 20px 40px 60px 80px;        background: #009900;        padding: 30px;        text-align: center;        width: 300px;        height: 120px;    }    </style></head> <body>    <div class="GFG">        <h2>GeeksforGeeks</h2>         <p>border-radius: 20px 40px 60px 80px;</p>     </div></body></html>
Output:
Now, we will understand the shorthand properties for the given below border-radius property.
border-top-left-radius: This property is used to specify the radius of the top left corner of an element.
Example: This example illustrates the border-radius property where the property value is applied for the top left corner of an element.
HTML
<!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>GeeksforGeeks</h2>         <p>border-top-left-radius: 35px;</p>     </div></body></html>
Output:
border-top-right-radius: This property s used to define the radius of the right top corner of the border of a given element.
Example: This example illustrates the border-radius property where the property value is applied for the top-right corner of an element.
HTML
<!DOCTYPE html><html><head>    <title>Rounded Corners</title>    <style>    .GFG {        border-top-right-radius: 35px;        background: #009900;        padding: 30px;        text-align: center;        width: 300px;        height: 120px;    }    </style></head> <body>    <div class="GFG">        <h2>GeeksforGeeks</h2>         <p>border-top-right-radius: 35px;</p>     </div></body></html>
Output:
border-bottom-left-radius: This property is used to define the radius of the bottom left corner of the border i.e. it makes the bottom-left of the border round.
Example: This example illustrates the border-radius property where the property value is applied for the bottom-left corner of an element.
HTML
<!DOCTYPE html><html><head>    <title>Rounded Corners</title>    <style>    .GFG {        border-bottom-left-radius: 35px;        background: #009900;        padding: 30px;        text-align: center;        width: 300px;        height: 120px;    }    </style></head> <body>    <div class="GFG">        <h2>GeeksforGeeks</h2>         <p>border-bottom-left-radius: 35px;</p>     </div></body></html>
Output:
border-bottom-right-radius: This property is used to define the radius of the right bottom corner of the border of a given element.
Example: This example illustrates the border-radius property where the property value is applied for the bottom-right corner of an element.
HTML
<!DOCTYPE html><html><head>    <title>Rounded Corners</title>    <style>    .GFG {        border-bottom-right-radius: 35px;        background: #009900;        padding: 30px;        text-align: center;        width: 300px;        height: 120px;    }    </style></head> <body>    <div class="GFG">        <h2>GeeksforGeeks</h2>         <p>border-bottom-right-radius: 35px;</p>     </div></body></html>
Output:
mixed border-radius property: This property is used to set all corners as the given value.
Example: This example illustrates the border-radius property where the property value is applied for all the corners of an element.
HTML
<!DOCTYPE html><html><head>    <title>Rounded Corners</title>    <style>    .GFG {        border-top-left-radius: 35px;        border-top-right-radius: 35px;        border-bottom-left-radius: 35px;        border-bottom-right-radius: 35px;        background: #009900;        padding: 30px;        text-align: center;        width: 300px;        height: 120px;    }    </style></head> <body>    <div class="GFG">        <h2>GeeksforGeeks</h2>         <p>border-top-left-radius: 35px;            <br>border-top-right-radius: 35px;            <br>border-bottom-left-radius: 35px;            <br>border-bottom-right-radius: 35px;</p>     </div></body></html>
Output:
Shorthands:
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;
Supported Browsers:
Google chrome 5.0, 4.0 -webkit-
Internet Explorer 9.0
Microsoft Edge 12.0
Firefox 4.0, 3.0 -moz-
Opera 10.5
Safari 5.0, 3.1 -webkit-
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
motamarriphani
nidhi_biet
ManasChhabra2
bhaskargeeksforgeeks
CSS-Properties
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property