Microsoft edge border-radius bugs

Question

In IE(>9) and Microsoft Edge,border-radius have a bugs when border-width is very wide.

.number {
    display: inline-block;
    position: relative;
    left: -3px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    
    background: #ff7322;
    border-radius: 50px;
    border: 8px solid #f0f0f0;
    
    color: #FFFFFF;
    font-size: 22px;
    font-weight: bold;
}

<span class="number">1.1</span>

Answer 1

its bug it IE

There is a workaround for these issues: element can be replaced with two nested elements, where the inner element has the desired background color as its background while the outer element’s background color is equal to the desired border color, and the outer element has padding equal to the desired border width.

HTML

 <div class="ok"><div>…</div></div>

CSS

    .ok {
        background: #000; /* Border color */
        border-radius: 100px;
        padding: 70px; /* Border width */
    }

    .ok > DIV {
        background: #fff; /* Background color */
        border-radius: 30px; /* Radius of outer element minus border  width */
        height: 60px; /* For illustration purposes */
    }

Example and source : http://tanalin.com/_experimentz/demos/blog/2011/border-radius-rendering/