Open In App

How to add rounded corner to an element using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads