IE 9 and styling the button element

Question

I have a button element where I apply a css class which adds border color to the various sides of the button. This worked in the previous IE versions, but not in IE 9

HTML:

<button class="hello-button">Hello, World</button>

CSS:
.hello-button {     
    border-width: 2px;
    border-style: solid;
    border-color: #eee #a9a9a9 #a9a9a9 #eee;
}

Is this a known issue and are there workarounds besides of the border-style: outset; I have tried various combinations but it seems like you can not any longer style the borders of the button element.

Edit: formating

Answer 1

If you specify 3 of the borders, those borders will render in IE9. Once you specify the 4th border, IE9 refuses to render any of the borders

Works:

.hello-button {     
    border-top: 2px solid #eee;
    border-right: 2px solid #a9a9a9;    
    border-bottom: 2px solid #a9a9a9;   
}

Doesn't Work:

.hello-button {     
    border-top: 2px solid #eee;
    border-right: 2px solid #a9a9a9;    
    border-bottom: 2px solid #a9a9a9;   
    border-left: 2px solid #eee;
}

Unless there's a valid (or at least spec'd) reason for this behavior, it looks like a bug to me...

Answer 2

This one is weird. It actually works if you don't specify border-style. IE9 will then give you a solid border, but other browsers will do all kinds of different things.

But it goes back to working if you specify border-radius (in addition to border-style).. So go on and treat yourself to some modern CSS styling :)

Of course this is not ideal if you want a perfectly square button, but you can set a low value for the radius (double check how it looks, though).