Transparent Border With Background Color

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 bla

Solution 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;
}

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

More info about background-clip on MDN.