How to set the shape of the top-left corner in percentage ?

Last Updated : 06 Jun, 2023

In this article, we learned how to set the shape of the top-left corner in percentage, With the help of the border-top-left-radius property, we can round the left top corner of the shape. border-top-left-radius property is employed around the high left corner of a part.

The property takes in one or 2 values that outline the radii of the 1 / 4 oval that defines the form of the corner of the outer border edge (see the diagram below). The primary worth is the horizontal radius, and the second is the vertical radius. If the second worth is omitted it’s traced from the primary. If either length is zero, the corner is square, not rounded.

Syntax:

border-top-left-radius: length / % / initial / inherit;

Percentages for the horizontal radius sit down with the dimension of the border box, whereas percentages for the vertical radius sit down with the height of the border box, and negative values are not allowed as a value of this property.

Example 1: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
    .gfg {
         border: 5px solid green;
         width:60%;
         text-align:center;
         height:400px;
         border-top-left-radius: 50%;
         background: url(
https://media.geeksforgeeks.org/wp-content/uploads/20190405121202/GfGLH.png);
    }
    </style>
</head>
<body>
    <div class="gfg"></div>
</body>
</html>

Output:

Example 2: Here is another example of using the border-top-radius property.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        #GFG {
            border: 5px solid green;
            width: 60%;
            text-align: center;
            height: 400px;
            border-top-left-radius: 50%;
        }
    </style>
</head>
 
<body>
    <h2>border-top-left-radius: 50%:</h2>
    <div id="GFG">
        <p style="margin-top:200px;">
            It is employed around the high left
            corner of a part.
        </p>
    </div>
</body>
</html>