CSS Border Radius Property

    In this CSS tutorial, we will be going to explore the border-radius property and its accepted values. We will see how this property can be used while styling an element and what other properties are associated with it.

    CSS border-radius Property

    The border-radius property defines the radius of the elements border’s corners. Using this property, we can also round the corner of an image.

    Example

    <!DOCTYPE html>
    <html>
    <head>
      <style>
        p{
            border-radius: 25px;
            border: 2px solid green;
            background-color: lightblue;
            padding: 30px;
            width: 300px;
            height: 200px;
        }
      </style>
    </head>
    <body>
        <p>Border Corners are rounded</p>
    </body>
    </html>

    Round Specific Corner

    There are 4 other properties associated with the border-radius property, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. With the help of these properties we can style specific border corners.

    Example

    Round only the top border corners

    <!DOCTYPE html>
    <html>
    <head>
      <style>
        p{
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            border: 2px solid green;
            background-color: lightblue;
            padding: 30px;
            width: 300px;
            height: 200px;
        }
      </style>
    </head>
    <body>
        <p>Top Border Corners are rounded</p>
    </body>
    </html>

    Using Shorthand border-radius property

    Instead of using border-top-left-radius or border-top-right-radius, we can use the shorthand border-radius property. Using this property with a single statement we can define different radius for every corner. The shorthand border-radius property can accept 4 values at once which represent all the four corners.

    Syntax:

    selector{ border-radius: top-left top-right bottom-right bottom-left}

    Example

    <!DOCTYPE html>
    <html>
    <head>
      <style>
        p{  /* top-left= 25px top-right = 0px bottom-left=50px bottom-right=40px */
            border-radius: 25px 0px 40px 50px;
            border: 2px solid green;
            background-color: lightblue;
            padding: 30px;
            width: 300px;
            height: 200px;
         }
      </style>
    </head>
    <body>
        <p>Border Corners are rounded</p>
    </body>
    </html>

    Summary

    • The CSS border-radius property makes the border corners rounded.
    • It accepts values in length units.
    • There are 4 child properties associated with border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius