title: css3 border-image's transparent png issue
body: <p>I'm using <code>border-image</code> with a PNG image that has a transparent section. The issue is that the div has <code>background-color</code> set the black. When I apply <code>border-radius</code>, the transparent section of the pattern shows the black of the div and not the background of the element containing the div.</p>
  
  <p>How do I get <code>border-radius</code> to ignore the color of the div. Below is the code in question.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header&gt;
      &lt;div  class="outerColumn"&gt;
          &lt;div class="column clearfix"&gt;
              &lt;h1&gt;Company&lt;/h1&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;My Work&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About me&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Elements&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body &gt; header {
     position:fixed;
     top:0;
     left:0;
     z-index:2;
  
     border-bottom:10px solid #0e0e0e;
     -moz-border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat;
     -webkit-border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat;
     border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat;
  }
  
  
  header, footer {
     width:100%;
     background-color:#0e0e0e;
     clear:both;
  }
  </code></pre>