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.
Last Updated :
29 Sep, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...