title: Internet Explorer 11 blur background-image with border-radius
body: <p>i've a div with border-radius and a background-image, this is displayed well in all browsers except in Internet Explorer 11, where, the background-image appears blurred.</p>
  
  <p>How i can fix this problem?</p>
  
  <pre><code>&lt;span class="button boxsizing soundicon"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.roomscene .top .roominfo .center span.button {
      height: 29px;
      width: 29px;
      background-color: #23221d;
      border-radius: 7px;
      border: 2px solid #494742;
      margin-top: -10px;
      display: inline-block;
      float: right;
  }
  
  .roomscene .top .roominfo .center span.button:hover {
      background-color: #2f2d27;
      cursor: pointer;
  }
  
  .roomscene .top .roominfo .center .soundicon {
      background: #23221d url('../images/rooms/roominfo/soundicon.png') no-repeat center center;
  }
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>I've noticed that if i remove the "center center" position of the background from .soundicon (or the border-radius from span.button), the blur disappears, but i anyway need to position correctly my background...</p>
  
  <p>EDIT2:</p>
  
  <p>Really weird bug of IE11, seems that if i specify position in px instead of center or 50%, the background-image didn't blur/be messy.</p>
  
  <p>Internet Explorer still is a bad browser.</p>
  
  <p>EDIT3: </p>
  
  <p>None, with px position, already blur on some images, but less than if i use center/%.</p>
  
  <p>LIVE EXAMPLE:</p>
  
  <p><a href="http://codepen.io/toomuchdesign/pen/ojspA">http://codepen.io/toomuchdesign/pen/ojspA</a></p>