title: CSS border-image with transparent image shows an edge on Android
body: <p>This page <a href="http://wildlife.x-tremeteam.com" rel="nofollow">http://wildlife.x-tremeteam.com</a> utilizes the CSS border-image property and a .png image with a transparent edge to create a "torn paper" look on my divs. It works great except on my Android (Samsung SIII), whether I'm using its default browser or the Chrome app. On that I can see a slight edge on the inside and outside of the 20px border.  Interestingly, I do not see the edge on the corners.  The background of the div with the border is transparent.  I only apply a background color to the div inside that.</p>
  
  <p>Browsers on my desktop, the iPhone I use for testing and all renderings on responsinator.com don't show the edge of the image.</p>
  
  <p>It must have something to do with the div's background-color property because if I set that to RED, the edges do turn red. However, making this property transparent won't remove it.</p>
  
  <p>CSS is as follows, which also includes a default div property which did not help: </p>
  
  <pre><code>div {border: 0; border-style: none; }
  
  .BoxGrunge {  
      border-color: #7777777; /* this won't really be seen */
      border-style: double;/* this won't really be seen */
      border-width: 20px 20px 20px 20px;
      -webkit-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
      -moz-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
      border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
      background-color: transparent; /* otherwise there is a white edge on Android */  /*THIS DOESN'T HELP */
      display: block !important;
      margin: 0 0 5px 0;
  }
  </code></pre>
  
  <p>Thanks, I have been staring at this for hours and can't figure it out.</p>