How to create CSS3 property for each corners ?
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> |
Output:
Please Login to comment...