How to set the shape of top-left corner of div using CSS ?
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
Share your thoughts in the comments
Please Login to comment...