<input type="range" min="1" max="40" value="10" style="align-self: center; width: 50%; margin-top: 10px">

<div class="container">
  <div class="block">
    <div class="block__inner">
      <div class="block__content">
        <div class="block__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit quas ipsam rem voluptatibus, repellat voluptate consequatur non tenetur blanditiis nulla ratione consequuntur voluptatem repellendus inventore minima neque numquam beatae cumque assumenda maiores</div>
        <div class="block__button">Lorem ipsum?</div>
      </div>
      <svg class="block__top-side" viewBox="0 0 654 654" preserveAspectRatio="none" aria-hidden="true">
        <path d="M0,655V0H2616M654,327V655" fill="none" vector-effect="non-scaling-stroke" />
      </svg>
    </div>
    <svg class="block__bottom-side" viewBox="0 0 654 40" preserveAspectRatio="none" aria-hidden="true">
      <path d="M654,0V40L0,2V0" fill="none" stroke-linecap="square" vector-effect="non-scaling-stroke"/>
    </svg>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  background:
    linear-gradient(to right, #0001 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(to bottom, #0001 1px, transparent 1px) 0 0 / 8px 8px;
  font-family: sans-serif;
}

.container {
  width: 70%;
  margin: 10px auto 0;
  outline: 1px dashed orange;
}

.block {
  --border-width: 10px;
  padding: calc(var(--border-width) / 2);
}

.block__inner {
  position: relative;
  z-index: 0;
}

.block__content {
  display: flex;
  padding: calc(var(--border-width) / 2 + 16px);
  padding-right: 0;
  align-items: center;
}

.block__text {
  flex: 1;
}

.block__button {
  padding: 8px;
  background-color: #00ee8e;
  margin-right: calc(var(--border-width) / -2);
  margin-left: 16px;
  white-space: nowrap;
}

.block__bottom-side,
.block__top-side {
  stroke: #00ee8e;
  stroke-width: var(--border-width);
}

.block__bottom-side {
  display: block;
  overflow: visible;
  width: 100%;
  height: 32px;
}

@media (max-width: 768px) {
  .block__bottom-side {
    width: auto;
    height: auto;
  }
}

.block__top-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
}

document.querySelector('input[type="range"]')
  .addEventListener('input', (e) => {
    document.querySelector('.block').style.setProperty('--border-width', `${e.target.value}px`);
  })