How to remove the button border using CSS

HTML buttons automatically get a border, background-color, and a few other styles. These are default styles made by web browsers.

To remove the button border you have to specify border: none in your CSS.

button {
  border: none;
}

In the same vein, if you want to remove other default styles, you have to write additional CSS.

Button default style

Just by adding a button tag in your HTML, it will receive some styles from the web browsers. I added a button on my HTML document and tested it in 3 different web browsers. See the default styles in the screenshot below.

Button default style on Chrome, Firefox & Microsoft Edge
Button default style on Chrome, Firefox & Microsoft Edge

If you take a closer look at the above screenshot, you’ll see that Chrome & Firefox have nearly identical styles for the button. Such as border, border-radius & background-color. These two browsers also have the same hover effect.

On the other hand, Microsoft Edge has no border-radius for the button and has a different hover effect.

This default style will/may vary from browser to browser. But you can always overwrite those default styles by writing CSS.

Overwriting button default styles

In the CSS below, I wrote a few lines of CSS that will change default styles. The properties are self-explanatory.

button {
  border: none;
  background-color: #5ca731;
  color: #FFFFFF;
  border-radius: 25px;
  transition: background-color 0.5s ease-in-out;
}
button:hover {
  background-color: #4C4C4C;
}

You can add more styles to the button such as padding, margin, gradient color, etc. If you need inspiration, please see these button styles.

If you want to add fancy borders to the button, see this post. Live Preview →

For different rounded buttons, see this post. Live Preview →

A different way to remove the button border

At the beginning of this post, I mentioned that you can remove it by specifying none to the border property.

Here I will show you a different approach/technic to remove the border.

You can remove or hide the border by specifying the same background & border color. See the following example CSS:

button {
  background-color: #5ca731;
  border: 2px solid #5ca731;
}

It’s actually not removing the border. Using the same color as the background & border, the border is unspecifiable in human eyes.

How to remove the outline border from the button?

The outline border is not always visible. If you click the button, you may notice a gray border. If you want to remove this outline border, write the following CSS:

button {
  outline: none;
}
/* OR */
button:focus {
  outline: none;
}

Please note that an outline border is a good thing and beneficial for user experience. Screen readers use this mostly. If you keep pressing the tab key on your keyboard, the outline border will walk you through all the clickable elements. So don’t delete the outline border until you’re sure what you’re doing.

Learn more about buttons

Conclusion

In this post, I explained two ways to remove button borders. I also explained how you can overwrite other default styles.

Additionally, you have links to other posts & demos that are related to buttons. Therefore if you still have any questions, please let me know.