Remove shadow border on IE9

Question

I have a issue on IE 9. I use the attribute:

 border: 2px solid #ffffff; 

but on IE 9 it does not show properly. Another browser (Chrome, FF) is OK.

Why does the shadow appear on IE 9 ?? This is demo http://jsfiddle.net/rdqm4wns/ . Please, run it on IE9

Answer 1

This is a rendering bug causing leakage of the radius into the border width.

Add this rule will resolve it: background-clip: padding-box;

.btn-radius {
    border: 2px solid #ffffff;
    background: #444444;
    width: 25px;
    height: 25px;
    border-radius: 6px;
    text-align: center;
    position: relative;
    background-clip: padding-box;
}