title: Anti-aliasing on rotated div with border image in firefox
body: <p>I have a div rotated 45 degrees, with a border image on it.</p>
  
  <p>In chrome and safari, it renders fine.</p>
  
  <p>In firefox, nasty anti aliasing lines appear around the edge of the rotated div, between the edge of it and its border image.</p>
  
  <p>Here's the simple HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
     &lt;div class="corner"&gt;
  
     &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's the CSS:</p>
  
  <pre><code>.container {
      margin: auto;
      width: 400px;
      height: 400px;
      background-color: black;
      outline: 1px solid #333333;
      position: relative;
      overflow: hidden;
  }
  
  .corner {
      position: absolute;
      bottom: -68px;
      right: -66px;
      width: 86px;
      height: 82px;
      background-color: #F1F2F3;
  
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
  
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
      border-style: solid;
      border-width: 14px 16px 28px;
  
      -moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
      -webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
      -o-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
      border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 fill repeat;
  
      -moz-background-clip: padding;
      -webkit-background-clip: padding;
      background-clip: padding-box;
  }
  </code></pre>
  
  <p>and here's a JSFiddle. Look at it in firefox to see what I mean: </p>
  
  <p><a href="http://jsfiddle.net/uAF2u/">http://jsfiddle.net/uAF2u/</a></p>
  
  <p>I've seen the tips for adding a transparent outline of 1px around the div, which would work if it didn't have a border image as in this case.</p>
  
  <p>Anyone run into this before and know of a way to sort it?</p>