I am currently learning how to create transparent borders by following the tutorial on CSS-Tricks website. Unfortunately, my code is not producing the desired transparent border effect. I have double-checked my code and everything seems correct to me.
For reference, please take a look at this JSFiddle
#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;
}
If you visit the example page on css-tricks regarding transparent borders, you will notice that they achieve the effect without using any complicated div tricks. Simply setting the div's background to white, making the border transparent, and specifying a clip area of padding is all it takes.