How to create CSS3 property for each corners ?

Last Updated : 19 Jul, 2022

In this article, we will learn how to style a corner using the CSS3 property. You can achieve this task by using border-radius properties.

The border-radius property in CSS is used to round the corners of the outer border edges of an element. This property can contain one, two, three, or four values. The border-radius property is used to set the border radius. This property is not applicable to the table elements when the border is collapsing.

Syntax:

border-radius: value;

Example 1: This example illustrates the border-radius property whose value is specified by a single value.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>How can you create CSS3 property  
             for each corner?</title> 
    <style> 
        .GFG { 
            border-radius: 20px 50px ; 
            background: #009900; 
            padding: 30px; 
            text-align: center; 
            width: 300px; 
            height: 120px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3><br><br> 
        <div class="GFG"> 
            <h2>GfG</h2> 
        </div> 
    </center> 
</body> 
</html> 

Output:

Example 2: In the below code, we will learn how can you create CSS3 property for each corner.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>How can you create CSS3  
             property for each corner?</title> 
    <style> 
        .GFG { 
            border-radius: 20px 50px 90px 140px; 
            background: #009900; 
            padding: 30px; 
            text-align: center; 
            width: 300px; 
            height: 120px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3><br><br> 
        <div class="GFG"> 
            <h2>GfG</h2> 
        </div> 
    </center> 
</body> 
</html> 