How to add rounded corner to an element using CSS ?
In this article, we will discuss rounded corners by using CSS properties. When we remove the sharp edge of any element and give it a round shape, it is called a rounded corner.
Approach: To change the sharp edge with a rounded edge we use the border-radius property.
Example 1: In this example, we named the HTML div tag with class rounded and styled it using native CSS properties, we applied the border-radius property to round the corners.
HTML
<!DOCTYPE html><html> <head> <style> div { background: green; height: 100px; width: 200px; } .rounded { border-radius: 10px; } </style></head> <body> <p><b> Before applying rounded class to div: </b></p> <div></div> <p><b> After applying rounded class to div: </b></p> <div class="rounded"></div></body> </html> |
Output:
Example 2: We can also round the corner of an image. In the stylings of the image we just have to pass the same CSS border-radius property.
HTML
<!DOCTYPE html><html> <head> <style> img { border-radius: 10px; } </style></head> <body> <img src= alt="image" /></body> </html> |
Output:
Note: Please refer to the article on CSS border-radius property for a better understanding.
Please Login to comment...