IE Rendering Bug on EM sized inputs

Question

The following html and css result in a strange 'gap pixel' along the bottom and/or right edge of my input in IE 11. I'm trying to get rid of it but all my usual tricks are failing. Any thoughts?

http://jsfiddle.net/9ev8z1n9/2/

Html:

<div class="return-to-main">
    <input class="clickable" value="submit" type="button" /> 
</div>

CSS

body{
    font-size: 16px;
}
.return-to-main {
    float: left;
    height: 100%;
    margin-left: 5.5em;
    font-size: 1.4em;
}
.return-to-main input[type="button"] {
    border: 0;
    margin-top: 1.5em;
    color: white;
    border-radius: 5px;

    height: 80px;
    width: 200px;
}

.return-to-main input:not(:active) {
    border: solid 1px rgb(90, 25, 30);
    border-bottom: solid 4px rgb(90, 25, 30);
}

    .clickable {
        border: solid 0.06em rgb(110, 45, 50);
        background-color: rgb(110, 45, 50);
        background: linear-gradient(to bottom, rgb(200, 30, 40) 0%,rgb(110, 45, 50) 49%,rgb(110, 45, 50) 100%);
    }
    .clickable:active {
        background-color: rgb(100, 35, 40);
        background: linear-gradient(to bottom, rgb(100, 35, 40) 0%, rgb(100, 35, 40) 49%,rgb(140, 30, 40) 100%);
    }

Edit: Removing the border-radius seems to fix it, as does removing the linear gradient. Both of these are part of the overall design.

Answer 1

Change:

.return-to-main input:not(:active) {
    border-bottom: solid 4px rgb(90, 25, 30);
}

To:

.return-to-main input:not(:active) {
    border-bottom: solid .01em rgb(90, 25, 30);
}

The border size is causing it to appear like that.