css3 transparent png border-image

Question

J'utilise border-image avec une image PNG qui a une section transparente. Le problème est que le div a background-color définir le noir. Lorsque j'applique border-radius, la section transparente du motif montre le noir de la div et non l'arrière-plan de l'élément contenant la div.

Comment puis-je obtenir border-radius pour ignorer la couleur de la div. Voici le code en 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

Mettre la frontière sur une enveloppe avec un fond transparent.

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

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

Answer 2

Vous pouvez définir background-clip padding-case pour définir la taille de la couleur de fond à la boîte de remplissage sans frontière:

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

Voir http://css-tricks.com/transparent-borders-with-background-clip/ pour plus d'informations.