css3 border-image's transparent png issue

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

You have not set the border-width property, I think that should solve your problem.

Please elaborate?

Do you have a live example it might be easier to see what you want ?

You don’t seem to be using border-radius in the above and your elements have the same background-colour so I’m a little confused. If you want to clip the background so that it’s not under the border then use background-clip.


-moz-background-clip:padding;
-webkit-background-clip:padding;
-background-clip:padding;