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

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>