October 8, 2022

How to Create Rounded Button in HTML and CSS

In this tutorial, you will learn how to create rounded button in HTML and CSS. The button element is used to perform some sort of action on a webpage such as a form submission.

It rarely requires one to modify the shape of a button, but sometimes you may need to do so to meet your requirement. To make a rounded button, you can make use of the CSS border-radius property.

In the following example, we will demonstrate how you can create a rounded button using CSS. Please have a look over the code example and the steps given below.

HTML

We have 2 elements in the HTML file (div and button). The div element is just a wrapper for the button element.
The innerText for the button element is “Click Me”

In the head element, we have added a stylesheet (style.css) using the link element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circled button</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>
        <button>Click Me</button>
    </div>
</body>

</html>

CSS

We are selecting the div element and setting the text-align property value to center to horizontally center align the div.

We are selecting the button element and setting the height and width property value to 100px, the border property value to 2px solid red, and the border-radius property value to 50%. As a result, it will create a rounded button.

div {
    text-align: center;
}

button {
    height: 100px;
    width: 100px;
    border: 2px solid red;
    border-radius: 50%;
}

You May Also Like: