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" >w3wiki</ p > </ div > </ body > </ html > |
Output: