How to add a rounded border with CSS ?

The purpose of this article is to add a rounded border to a HTML element by using the border-radius property in CSS. It is used to round the corner of an element. The property sets the border-radius for the element.

Syntax:

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .GFG { 
            border-radius: 75px 75px; 
            background: blue; 
            padding: 16px; 
            text-align: center; 
            width: 300px; 
            height: 120px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1> 
            GeeksForGeeks 
        </h1> 
        <h2> 
            How to add a rounded  
            border with css ? 
        </h2> 
  
        <div class="GFG"> 
            <h4> 
                Rounded corners Borders 
            </h4> 
        </div> 
    </center> 
</body> 
  
</html>  

Output:

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts:

ManasChhabra2

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.