Skip to content
Related Articles

Related Articles

CSS | border radius property
  • Difficulty Level : Easy
  • Last Updated : 08 Jul, 2020

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:

Syntax:

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

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:




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




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




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




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




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




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




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




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




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

    Supported Browsers: The browser supported by CSS | border radius property are listed below:

    • Google chrome 5.0, 4.0 -webkit-
    • Internet Explorer 9.0
    • Firefox 4.0, 3.0 -moz-
    • Opera 10.5
    • Safari 5.0, 3.1 -webkit-
    My Personal Notes arrow_drop_up
Recommended Articles
Page :