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
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.
- We have 2 elements in the HTML file (
button). The div element is just a wrapper for the button element.
innerText for the button element is
- In the head element, we have added a stylesheet (
style.css) using the link element.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.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.
border: 2px solid red;