Microsoft edge border-radius bugs

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>

Answers


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/


Need Your Help

geolocation.bindTo() is not defined

geolocation openlayers-3

I was following this guide. It executes normally when you visit the site but when I try to run it from my localhost it gives me the geolocation.bindTo() an error undefined. I read about it being the

How to display missing ASP.NET MVC 1.0 VS Project Templates in Visual Studio 2008?

asp.net-mvc visual-studio-2008 templates

Visual Studio 2008 is not picking up the MVC 1.0 project templates. The MVC 1.0 release is installed on my system along with .NET 3.5 SP1 (pre-reqs).