Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn How to set the shape of the top-left corner of a 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: In this example, we are using the above-explained approach.

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:


Last Updated : 18 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads