Search form (Bootstrap 3) behaving strangely in IE - forms

Question

I have a search form with Bootstrap 3 that looks and works perfectly in Chrome and Firefox, but two of the corners are behaving strangely in Internet Explorer and I can't figure out why. I basically have the input button showing as if it was inside the search form, but in reality the search form has no right borders and the input button has no left borders, so it looks like they're one piece.
For some strange reason I can't figure out, in IE it has both rounded corners and some unfinished straight corners on the right side that looks like this:
Here is my HTML code:
<form class="form-inline topsearchform" role="form">
<div class="input-group">
<input class="form-control searchformradius" type="text" placeholder="Search products...">
<span class="input-group-btn">
<button class="btn btn-default searchformbutton" type="button"><i class="icon-search searchicon"></i></button>
</span>
</div>
</form>
And the CSS:
.searchformbutton{
border-radius: 6px;
border: 1px solid #CCCCCC;
border-left:0px solid #CCCCCC;
height:34px;
}
.searchformbutton:active{
border-radius: 6px;
border: 1px solid #CCCCCC;
border-left:0px solid #CCCCCC;
height:34px;
box-shadow:none;
background: #FFFFFF;
}
.searchformbutton:hover{
border-radius: 6px;
border: 1px solid #CCCCCC;
border-left:0px solid #CCCCCC;
height:34px;
box-shadow:none;
background: #FFFFFF;
}
.searchformbutton:focus{
border-radius: 6px;
border: 1px solid #CCCCCC;
border-left:0px solid #CCCCCC;
height:34px;
box-shadow:none;
background: #FFFFFF;
}
.form-inline.topsearchform{
width:300px;
}
Here is a jsFiddle: http://jsfiddle.net/dpLgc/
Any help as to why it looks like this in IE would be greatly appreciated. Note in the default Bootstrap 3 code, it looks like in IE, so it must be somewhere in this code :(