IE9 input/button element border color issue

Question

In the site I am currently building I am having trouble getting my border colors right for <input> and <button> elements. I would like to have the top, left, and right borders to be the same color and then have the bottom border a different color. I can get the styling to work for any other element to work except for those two, and this issue only exist in IE9. Any help or explanation would be greatly appreciated.

Example of my problem: http://jsfiddle.net/NyG3x/24/

Answer 1

Try setting to borders separately.

border: 1px solid #000;
border-bottom: 5px solid #CE181E

This appears a bug in IE9. If you set the bottom border to 1px, the red border appears to show correctly. However, if you set the value to anything more than 1px, it seems to revert the border-color to the value of the other border-color.

UPDATE

A simple solution would be to remove the styling from the button, wrap the inner text of the button inside a div and style the div. This works in IE9 as shown here.

Answer 2

I know this is more markup, but it will surely solve the issue.

Apply the 1px border as usual to the three sides, but wrap your form elements in a tag, say a div tag and apply a 5px bottom border on the div tag.

HTML would look something like this:

<form id="button-set-two">
    <div class="btn-wrapper">
        <input class="btn-style" type="submit" value="Btn1" />
    </div>
</form>

And CSS would look like this:

#button-set-two .btn-style{
    border: 1px solid #000;
    border-bottom:none;
    color: #000;
    float: left;
    font-size: 1.6em;
    margin-right: 5px;
    padding: 2px 10px;
    background: none;
}

#button-set-two .btn-wrapper{
    border-bottom:5px solid #CE181E;
}