Search code examples
cssborderstylesheet

Weird black 'outer border' outside border in IE11

I've been creating a Leaflet map with Icons. The icons all have a 1 pixel white border around them. That works fine, but in IE11 there is some weird, very small, black line outside of the border.

enter image description here

I've been looking around for explanation, but couldn't find anything about it online. Does anyone have a idea what could cause this outer 'line'?

Below the CSS I used on the div element.

.lfpt-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    position: relative;
    top: 2px;
    margin: 0 5px 0 5px;
    border: 1px solid white;
    width: 28px;
    height: 28px;
    background-color: rgb(66, 20, 95);
}

Here the HTML of the icon wrapper

<div class="lfpt-icon-wrapper" aria-label="5G Fieldlab icoon" role="img" aria-hidden="true">
  <span class="lfpt-icon g-fieldlab"></span>
</div>

The image in the cirlce is a dynamically set base64 background image on the inside span element.

Hope someone can help me further!

Solution

  • There seems to be a old bug in IE11 with the border-radius.

    Try adding this line to your class:

    background-clip: padding-box;

    If you encounter weird edges or that the circle is not quite round you could try also adding this line:

    box-sizing: border-box;