html - Transparent border with background color

Question

This is strange.

This works:

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

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

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

Am I missing something ?

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

Answer 1

The behaviour you are experiencing is that the background of the element appears through the transparent border. If you want to prevent this and clip 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>