How to have transparent scooped corners?

Question

I need to create a card with a rounded corner on left border. somehow i achieved it, but only for white background. Please see the code below. I want to use the card on different backgrounds. And this card can me in nested DOM.

How to make it compatible to any background?

I have created this snippet to understand the issue.

.card.border {
  margin-left: -4px;
  margin-right: -4px;
  border-radius: 16px;
  background: #4c4c4c;
  border: 4px solid #4c4c4c;
}
.card-section {
  border: 1px solid #d6d6d6;
  padding: 24px;
  border-radius: 16px;
  background-color: #fff;
  height: 100px;
}
.card .card-separator {
  height: 2px;
  width: 100%;
  background-image: linear-gradient(to right, #d6d6d6 50%, transparent 50%), linear-gradient(to right, #d6d6d6 50%, transparent 50%), linear-gradient(to bottom, #d6d6d6 50%, transparent 50%), linear-gradient(to bottom, #d6d6d6 50%, transparent 50%);
  background-position: left top, left bottom, left top, right top;
  background-position-x: left, left, left, right;
  background-position-y: top, bottom, top, top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
  margin-top: 24px;
  margin-bottom: 16px;
  color: #d6d6d6;
}
.card .card-separator::before {
    content: "";
    display: flex;
    background: #fff;
    position: relative;
    border-width: 4px 4px 4px 0;
    border-style: solid;
    height: 24px;
    width: 12px;
    border-bottom-right-radius: 24px;
    border-top-right-radius: 24px;
    left: -29px;
    top: -12px;
    border-color: #4c4c4c;;
}
.padding-20{
  padding: 20px;
}
.red-bg{
  background: #9e9e9e;
  padding:20px;
}

  <div class="padding-20">
  <div class="card border">
    <div class="card-wrapper">
      <div class="card-section">
    content above
        <div class="bottom-contianer">
          <div>
            <div class="card-separator"></div>
            content below
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="red-bg">
    <div class="card border">
    <div class="card-wrapper">
      <div class="card-section">
    content above
        <div class="bottom-contianer">
          <div>
            <div class="card-separator"></div>
            content below
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>