Как выполнить такой элемент?

#menu {
    margin: 40px;
    height: 90px;
    width: 300px;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}


#menu .border {
    position: absolute;
    width: 110%;
    height: 30px;
    border-radius: 30px;
    background-color: #4058f6;
    border: 1px solid #4058f6;
}

#menu .border.top { top: -10px; }
#menu .border.bottom { bottom: -10px; }
#menu .border.right { right: 0px; }

<div id="menu">
    <div class="border top right"></div>
    <div class="border bottom right"></div>
</div>

.nav {
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(#66aabb, #447799);
  width: 200px;
}

.nav__link {
  padding: 10px;
  position: relative;
}

.nav__link:hover {
  background-color: white;
}

.nav__link::before,
.nav__link::after {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
}

.nav__link:hover::before,
.nav__link:hover::after {
  content: "";
}

.nav__link:hover::before {
  background: radial-gradient(circle at left top, transparent 20px, white 21px);
}

.nav__link:hover::after {
  background: radial-gradient(circle at left bottom, transparent 20px, white 21px);
}

.nav__link::before {
  top: -20px;
}

.nav__link::after {
  bottom: -20px;
}

<nav class="nav">
  <a class="nav__link">hello</a>
  <a class="nav__link">hello</a>
  <a class="nav__link">hello</a>
  <a class="nav__link">hello</a>
  <a class="nav__link">hello</a>
</nav>