带有 IE9 和实线边框的边框半径效果

Question

I just noticed that my address link styled as a button does not properly show a radius in IE9 when using the CSS below:

a.btn {
    background: #F00;
    color:#333;
    font-size:12px;
    padding: 3px 4px 3px 4px;
    border:1px solid #444;
    border-radius:3px 3px 3px 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
    cursor:default;
}

CSS example

When I remove the border:1px solid #444; then a nice curved border appears.

Is this a bug with IE? In Firefox everything works good. Anyone else seen anything like this? Seems like it only happens when border-radius is set to a low value. I know this is not very important on the scale of things but I'm interested to hear if anyone knows why the radius doesn't properly show.

Answer 1

It works for me. Check it using

border-radius: 20px;

http://jsfiddle.net/6Nr2n/1/

http://prntscr.com/2djxa