<p>I am implementing a design that uses custom styled submit-buttons. They are quite simply light grey buttons with a slightly darker outer border:</p>

<pre><code>input.button {
    background: #eee;
    border: 1px solid #ccc;
}
</code></pre>

<p>This looks just right in Firefox, Safari and Opera. The problem is with Internet Explorer, both 6 and 7. </p>

<p>Since the form is the first one on the page, it's counted as the main form - and thus active from the get go. The first submit button in the active form receives a solid black border in IE, to mark it as the main action.</p>

<p>If I turn off borders, then the black extra border in IE goes away too. I am looking for a way to keep my normal borders, but remove the outline.</p>

Right, well here's an ugly fix for you to weigh up... Stick the button in a
```
<span>
```
, nuke the border on the button and give the border to the span instead.
IE is a bit iffy about form element margins so this might not work precisely. Perhaps giving the span the same background as the button might help in that respect.
```
```
span.button {
    background: #eee;
    border: 1px solid #ccc;
}

span.button input {
    background: #eee;
    border:0;
}
```
```
and
```
```
<span class="button"><input type="button" name="..." value="Button"/></span>
```
```