How to handle border image with transparent background and background image [duplicate] - border

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>Home</li>
<li>Portfolio</li>
<li>My Work</li>
<li>About me</li>
<li>Elements</li>
<li>Contact</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

You can set background-clip to padding-box to set background color size to padding box without border:
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
See http://css-tricks.com/transparent-borders-with-background-clip/ for more informations.

Answer 2

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>