border-radius creates an outline in IE

Question

When border-radius is applied to a coloured div that has a white border, the background color appears outside the white border in corners. Why is this happening in ie? (Tried ie9 and ie10).

<div class="rounded"></div>

.rounded {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #f00;
    width: 100px;
    height: 100px;
}

body {
    background-color: #fff;
}

The thing here is that I really need the white border, so removing it or making it transparent, as some have proposed, is not an option. Here is a fiddle: http://jsfiddle.net/z0rt63e2/1/

Answer 1

As in my comment above (in the interest of having an answer), use background-clip: content-box in your .rounded class.

Here's some reading material: http://www.css3.info/preview/background-origin-and-background-clip/