How to Make Rounded Corners button in HTML & CSS

You can use CSS’s border-radius property to make rounded corners HTML buttons.

Rounded corners HTML Buttons

You can make rounded corners button by adding border-radius of 5px to 10px on HTML buttons.

HTML code for rounded corners

<p>Button</p>
<button class="button rounded-corners"> learn Coding for free</button>

CSS code for normal buttons

.button {
  background-color: #a61e4d;
  color: #efefef;
  border: none;
  text-align: center;
  padding: 10px 20px;
}

Result

CSS code for rounded corners

.rounded-corners {
  border-radius: 5px;
}

Result

Oval HTML CSS Buttons(Pill Buttons)

Learn how to create buttons with round-shaped edges.

HTML code for Pill shaped button

<button class="button"> Normal button</button>
<button class="button pill-shape"> Rounded corner button</button>

CSS code for normal buttons

You can reuse the same CSS code for buttons from the previous section.

.button {
  background-color: #a61e4d;
  color: #efefef;
  border: none;
  text-align: center;
  padding: 10px 20px;
}

CSS Code for pill-shaped(oval) buttons

Increasing the border radius will give you the nice round shaped ends on the button.

.rounded-corners {
  border-radius: 25px;
}

Result