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>More info about background-clip on MDN.