2

I am following the transparent border tutorial at CSS-Tricks. However, my code does not render the border transparent. My code (to my eyes) looks correct.

Please see this fiddle

#popup {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
    border: 20px solid rgba(0,0,0,0.3);
    border-radius: 20px;

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

    padding: 10px;
    margin: 20px;
    background: white;
}​

You can see on css-tricks example page that they don't require any double wrapped div tricks. They just set the div background to white, the border to transparent and specify a clip area of padding.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
mrtsherman
  • 39,342
  • 23
  • 87
  • 111

1 Answers1

2

Swap the order of background and border-color see:

http://jsfiddle.net/efortis/26795/4/

Eric Fortis
  • 16,372
  • 6
  • 41
  • 62
  • The tutorial did not require wrapping their content with an inner div and setting it to white. This is a workaround, but not the solution I am looking for. http://css-tricks.com/examples/TransparentBorders/ – mrtsherman Jun 15 '12 at 16:08
  • 2
    Or rather, swap the order of `background` and `background-clip`. – BoltClock Jun 15 '12 at 16:15
  • Not trying to get in the way, but that fiddle renders perfectly to me, and he hasn't changed the html in any way (I assume you don't want to do this). – ACarter Jun 15 '12 at 16:43