Transparent frame with background

Question

This is strange.

It works:

border-right: 1px solid rgba(0,0,0,0.12); /* renders a gray border */ 

But when I use it along with the background color, then the border is now a solid black line.

 background-color: #333; border-right: 1px solid rgba(0,0,0,0.12); /* renders a black border */ 

Did I miss something?

http://codepen.io/anon/pen/myxpXN

Answer 1

The behavior you are experiencing is that the background of the element is displayed through a transparent frame. If you want to prevent this and pin the background inside the border, you can use:

 background-clip: padding-box; 

 html, body { height: 100%; margin: 0; padding: 0; background:green; } #nav { position:relative; height: 100%; width: 240px; background-clip: padding-box; /** <-- this **/ background-color: pink; border-right: 10px solid rgba(0,0,0,0.12); } header { height: 4em; background-color: #ffffff; } 

 <div id="nav"> <header></header> <nav></nav> </div> 

Learn more about background-clip in MDN.