Tutorialspoint.dev

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

  • 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.
    <!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-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.
    <!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-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.
    <!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:
    border-radius-four-value

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



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

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

<!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-top-right-border

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

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

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

<!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:
border-bottom-right-radius

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

<!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:
mixed-border-radius-property



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter