Two divs, one with border rounded other with border rounded inverted

Question

I'm trying to create a guide component and need help. How can I have an identical border to this (using CSS):

Anyone know of any strategy, any way to do this, what should I study? Thanks

Answer 1

A bit of fast example here as I'm in a hurry. You have to tweak it. Hope it guides you in the right direction anyway. =)

<nav class="navbar">
  <div class="navbar__item">Item </div>  
  <div class="navbar__item active">Item </div>  
  <div class="navbar__item">Item </div>  
  <div class="navbar__item">Item </div>
</nav>

<style>
  .navbar { 
    background-image: linear-gradient(to bottom, orange, orange 50%, green 50%);
    height: 50px;
    display: flex;
    flex-direction: row;
    border-bottom: 5px solid green;
    border-top: 5px solid orange;
  }

  .navbar__item {
    background: orange;
    padding: 20px;
    width: 400px;
    position: relative;
  }

  .navbar__item.active {
    background: green;
    border-radius: 10px 10px 0 0;
    margin: 0 10px;        
  }

 .navbar__item.active:before {
    position: absolute;
    z-index: 1000;
    left: -20px;
    top: 0px;
    content: "";
    width: 20px;
    background: orange;
    height: 50px;
    border-radius: 0 0 10px 10px;
  }

 .navbar__item.active:after {
    position: absolute;
    z-index: 1000;
    right: -20px;
    top: 0px;
    content: "";
    width: 20px;
    background: orange;
    height: 50px;
    border-radius: 0 0 10px 10px;
  }
</style>