Создание полупрозрачного бордера

/* For example only --> */ body { margin: 0; min-height: 100vh; background: center / cover url("https://phonoteka.org/uploads/posts/2021-06/1623575344_29-phonoteka_org-p-abstraktsiya-v-cherno-belom-tsvete-oboi-kr-30.jpg") no-repeat;
  display: grid; place-items: center; }

.block {
  min-width: min-content;
  max-width: 96vw;
  width: 582px;
  padding: 14px;
  border-radius: 21px;
  box-sizing: border-box;
  background-color: #000;
  box-shadow: inset 0 0 0 1px #f000, 0 0 0 3px #fff;
  overflow: hidden;
  resize: horizontal;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  height: 54px;
  width: 100%;
  padding: 0 13px;
  border-radius: 20px;
  box-sizing: border-box;
  background-color: #fff;
}
.logo {
  height: 30px;
  width: 30px;
}
.menu {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 25px;
  height: 54px;
  width: 100%;
  border-radius: 20px;
  font: 12px/1em Monserrat, sans-serif;
}

.supl {
  display: grid;
  place-items: center;
  height: 30px;
  min-width: 120px;
  border: none;
  border-radius: 10px;
  font: 11px/1em sans-serif;
  color: #fff;
  background-color: #9d7df8;
}

.spacer {
  height: 15px;
  width: 100%;
  border-radius: 20px;
  background: 
    calc(0% - 12px) 0px / 62px 15px radial-gradient(circle 7.5px at 31px 7.5px, #000 0 85%, #0000 100%) no-repeat, 
    calc(100% + 12px) 0px / 62px 15px radial-gradient(circle 7.5px at 31px 7.5px, #000 0 85%, #0000 100%) no-repeat, 
    calc(50% - 15px) 0px / 62px 15px radial-gradient(circle 7.5px at 31px 7.5px, #000 0 85%, #0000 100%) repeat-x, 
    calc(50% + 15px) 0 / 62px 15px radial-gradient(circle 7.5px at 31px 7.5px, #000 0 85%, #0000 100%) repeat-x, 
    calc(50% - 0px) 0 / 62px 15px linear-gradient(to right, #0000 0 16px, #000 17px 45px, #0000 46px 62px) repeat-x, 
    50% 50% / calc(100% - 38px) 15px linear-gradient(to right, #fff 0 0) no-repeat;
}

.content {
  min-height: min-content;
  height: min-content;
  width: 100%;
  padding: 13px;
  border-radius: 20px;
  box-sizing: border-box;
  background-color: #fff;
}

<div class="block">
  <div class="head">
    <img src="https://www.lomond.ru/sites/default/files/images/media/gif/ornam/sign/131tl.gif" alt="https://phonoteka.org/" class="logo">
    <nav class="menu">
      <li>Home</li>
      <li>About</li>
      <li>Contacts</li>
    </nav>
    <button class="supl">Go to supplie's</button>
  </div>
  <div class="spacer"></div>
  <div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius minima, minus natus consequatur perferendis veritatis corporis nisi vitae? Tenetur deleniti quod atque illo a ipsam maxime amet cupiditate quidem? Magni. Incidunt cupiditate dolore cumque aperiam.
    Nemo nobis, optio sint culpa repellendus maxime debitis iure eius, ipsa laboriosam recusandae! Quo, dolorum nemo distinctio eum veniam rerum labore ipsa iusto fugit expedita.
  </div>
  <div class="spacer"></div>
  <div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius minima, minus natus consequatur perferendis veritatis corporis nisi vitae? Tenetur deleniti quod atque illo a ipsam maxime amet cupiditate quidem? Magni. Incidunt cupiditate dolore cumque aperiam.
  </div>
</div>