css3 border-image's transparent png issue

Question

I'm using border-image with a PNG image that has a transparent section. The issue is that the div has background-color set the black. When I apply border-radius, the transparent section of the pattern shows the black of the div and not the background of the element containing the div.

How do I get border-radius to ignore the color of the div. Below is the code in question.

HTML

<header>
    <div  class="outerColumn">
        <div class="column clearfix">
            <h1>Company</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">My Work</a></li>
                    <li><a href="#">About me</a></li>
                    <li><a href="#">Elements</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

CSS

body > 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;}

Answer 1

Put the border on a wrapper with transparent background.

<div id="HeaderBorder">
    <header>
        ...
    </header>
</div>

<style type="text/css">
    #HeaderBorder { /* border image stuff + transparent background */ }
</style>