Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add rounded corner to an element using CSS ?

  • Last Updated : 29 Sep, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!