Skip to content

Remove Internet Explorer Button Border

Apr 9, 2009 1 min read #css

This post is more than 18 months old. Technology changes quickly, so some of this content may be out of date (but that's not always the case). Please verify any technical or programming information against 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;
}
css

And the HTML:

<span class="button"><button>My Button</button></span>
html
Go to all posts