Skip to content
Related Articles

Related Articles

Improve Article

How to set the shape of top-left corner of div using CSS ?

  • Last Updated : 18 Apr, 2021
Geek Week

In this article, we will learn How to set the shape of the top-left corner of div using CSS. The border-top-left-radius property is used to form the shape of the top-left corner. We can use percentages to shape the top-left corner, for that you can check this article How to set the shape of the top-left corner in percentage?

Approach: The border-top-left-radius property is used to form the shape of the top-left corner. So we will use this property to set the shape of the top-left corner. It takes two values first is top_border, and the second is left_border, but we can omit the second one then the first value is the value of top_border and left_border.

Syntax:

border-top-left-radius: top_border left_border;

Example 1:

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        .gfg1{
            padding-left: 50px ;
            font-size: 30px;
            color: green;
        }
        div{
            width: 300px;
            border: solid 2px green;
            margin-left: 30%;
            border-top-left-radius: 20px 50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <p class="gfg1">GeeksforGeeks</p>
  
          
    </div>
</body>
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :