Set transparent background color div over black parent border

Question

I am trying to create some kind of selector menu which has active and nonactive elements and depending on which one is selected it shows one thing or another.

I have set a border for the menu and for the content but I would like to make it "connected" by removing the bottom-border when you select a different menu option. It looked fine since I decided to set a transparent background color to this: rgba(150,150,150,0.5). The border from parent is visible because the background of the selected menu child is not solid.

Simplified html:

<div class="menu-alias fac">
  <div id="menu_fac_1" class="alias afac aliselected">
    <a style="cursor:pointer" onclick="facalias(1);" class="alias-fac-a">D</a>
  </div>
  <div id="menu_fac_0" class="alias afac ali-nuevo">
    <a style="cursor:pointer" onclick="facalias(0);" class="alias-fac-a">+</a>
  </div>
</div>

<div class="facturacion" id="fac_1" style="display: block;">
  <label for="acc_f_nombre_1" class="acc-label required">
  Nombre:<span class="required">*</span><input id="acc_f_nombre_1" value="D" type="text" class="acc-text upp">
  </label>
</div>

<div class="facturacion" id="fac_0" style="display: none;">
  <label for="acc_f_nombre_0" class="acc-label required">
  Nombre:<span class="required">*</span><input id="acc_f_nombre_0" value="" type="text" class="acc-text upp">
  </label>
</div>

And css:

.menu-alias {
  float: left;
  width: 100%;
  border-bottom: 1px solid;
  display: flex;
}
.menu-alias .alias.aliselected {
  background-color: rgba(255,100,0,0.3);
  margin-bottom: -1px;
}
.menu-alias .alias{
  float: left;
  border: 1px solid;
  border-bottom: 0;
  border-right: 0;
  background-color: rgba(255,100,0,0.1);
}
.menu-alias .alias.ali-nuevo{
  border-right:1px solid;
}
.menu-alias .alias a{
  display: block;
  padding: 5px 10px;
  cursor: pointer;
}
.facturacion{
  padding: 5px;
  background-color: rgba(255,100,0,0.3);
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  float:left;
}

Here a fiddle to better understanding. I have not put the jquery code so clicking not works but it is undertandable what it has to do in my opinion.

If you change the 0.3 transparency on aliselected to 1 you will see that it puts itself over the border, which is what I would like but maintaining the transparency.

Answer 1

You could always put the "transparent" color as .menu-alias .alias.aliselected background-color.

.menu-alias .alias.aliselected {
   background-color:#f7caad;
   margin-bottom: -1px;
}

Fiddle here: https://jsfiddle.net/w0mp3r/Lpcrd6jx/1/