Open In App

How to add a rounded border with CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article we will see how we can add a rounded border with CSS. We can add a rounded border with CSS using the border-radius property for the element.

Syntax:

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

Example 1: In the below example, we are creating a div having class name “GFG” which have round borders.

html




<!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:

Example 2: In this example, we will apply rounded borders to a button element. We are setting the height and width to be same and then setting the border-radius to 50% to get the button completely rounded.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        .btn{
             border-radius: 50%;
             background: rgb(2, 138, 43);
             color: #fff;
             padding: 2px;
             text-align: center;
             width: 75px;
             height: 75px;
             border: solid 1px transparent;
        }
          h1 {
             color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>
              Adding rounded border to a button
          </h2>
        <button class="btn">Submit</button>
    </center>
</body>
</html>


Output:

 

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 22 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads