Skip to content
Related Articles

Related Articles

Improve Article
How to set the shape of the top-left corner in percentage ?
  • Last Updated : 31 Mar, 2021

By the help of border-top-left-radius property we can round the left top corner of 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 that the horizontal radius, the second 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:



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(
          
    }
    </style>
</head>
<body>
    <div class="gfg"></div>
</body>
</html>                 

Output:

Example 2:

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>


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :