title: Strange issue with background image and border-radius in IE11
body: <p>Here is test link:
  <a href="http://bybyweb.com/cafe-vert/" rel="nofollow">http://bybyweb.com/cafe-vert/</a>. 
  Problem:
  In IE11 there is strange empty (?) space at the right hand side of 'product box': "PERDEZ PLUS DE 10KG etc,etc...." - part (green box and 3 white boxes at the left hand side). It seems that background image doesn't 'stretch' to container width (container width changing doesn't solve problem).</p>
  
  <p>In Firefox and Chrome, all looks perfect.</p>
  
  <p>Relevant code: HTML</p>
  
  <pre><code>&lt;div class="product-box first-box"&gt;
  &lt;h4&gt;PERDEZ PLUS DE 10KG - Achetez 3 MOIS et obtenez 2 gratuitS! &lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="product-box "&gt;
  &lt;h4&gt;PERDEZ entre 5 et 10 kg - Achetez 2 MOIS et obtenez 1 gratuit! &lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="product-box "&gt;
  &lt;h4&gt;PERDEZ ENTRE 3 ET 5 KG - ACHETEZ 1 MOIS DE CURE!&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="product-box "&gt;
  &lt;h4&gt;DERNIÈRE CHANCE !! - Achetez 1 MOIS et obtenez 1 gratuit! &lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.product-box {
      width:598px;
      height:210px;
      border:1px solid #0b7564;
          background-position:center top;
  border-radius:7px;
      margin:0 auto;
      -webkit-box-shadow: 2px 7px 15px -10px rgba(112,108,112,1);
  -moz-box-shadow: 2px 7px 15px -10px rgba(112,108,112,1);
  box-shadow: 2px 7px 15px -10px rgba(112,108,112,1);
  margin-bottom:23px;
  background-image:url(../images/product-bar.png);
  background-position:top;
  background-repeat:no-repeat;
  
   background-clip:border-box;
  }
  </code></pre>
  
  <p>I guess it is related to border-radius using, but, i can't find IE (11, and probably lower versions) fix... Thanks in advance!</p>