Remove Internet Explorer Button Border

Apr 9, 2009 css

This post is more than 18 months old. Since technology changes too rapidly, this content may be out of date (but that's not always the case). Please remember to verify any technical or programming information with the current release.

Internet Explorer provides an additional border to any button element in the page if you don’t explicitly assign a 0px border to it. I have a bunch of buttons on a design that I’d like to have a 1px #fff border on. Unfortunately, with the additional border that IE adds, it looks horrible.

The solution was to add a span around the button:

button {
  border: 0px;
}
.button {
  border: 1px solid #fff;
}

And the HTML:

<span class="button"><button>My Button</button></span>