CSS | border radius property

It is a CSS property to round the corner of an element. The border-radius property is used to set the border-radius.

border-radius-property

Rounded Corner property:

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-botton-left-radius, border-bottom-right-radius. It sets all corner to the same value.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    border-radius

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    border-radius-two -value

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    border-radius-three-value

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    border-radius-four-value

border-top-left-radius: This property is used to set the value to top-left corner.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
border-top-left-radius

border-top-right-radius: This property is used to set the value to top-right corner.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
border-top-right-border

border-bottom-left-radius: This property is used to set the value to bottom-left corner.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
border-bottom-left-radius

border-bottom-right-radius: This property is used to set the value to bottom-right corner.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
border-bottom-right-radius

mixed border-radius property: This property is used to set all corners as given value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
mixed-border-radius-property



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : motamarriphani



Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.