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 se

Solution 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.

Solution 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>