Voucher style

style.scss

$body-bg: red;

@mixin circleBorder($direction: left) {
  &::before,
  &::after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    background: $body-bg;
    #{$direction}: -1px;
  }
  
  @content;
}

body {
  background: $body-bg;
}

.voucher {
  display: flex;
  width: 100%;
  min-height: 15rem;
  
  &-image,
  &-info {
    position: relative;
    padding: 1rem;
    border: 1px dashed;
    border-radius: 5px;
  }
  
  &-image {
    width: 25%;
    border-right: 0;
    padding-right: 0;
    
    @include circleBorder(right) {
      &::before {
        top: -1px;
        border-top: 0;
        border-left: 1px dashed;
        border-right: 0;
        border-bottom: 1px dashed;
        border-radius: 0 0 0 20px;
      }
      &::after {
        bottom: -1px;
        border-top: 1px dashed;
        border-left: 1px dashed;
        border-bottom: 0;
        border-right: 0;
        border-radius: 20px 0 0 0;
      }
    }
    
    .voucher-content {
      border-right: 1px dashed;
      min-height: 100%;
    }
  }
  
  &-info {
    width: 75%;
    border-left: 0;
    background: #CCC;

    @include circleBorder(left) {
      &::before {
        top: -1px;
        border-top: 0;
        border-left: 0;
        border-right: 1px dashed;
        border-bottom: 1px dashed;
        border-radius: 0 0 20px 0;
      }
      &::after {
        bottom: -1px;
        border-top: 1px dashed;
        border-left: 0;
        border-bottom: 0;
        border-right: 1px dashed;
        border-radius: 0 20px 0 0;
      }
    }
  }
}

voucher.html

<div class="voucher">
  <div class="voucher-image">
    <div class="voucher-content">
      IMG
    </div>
  </div>
  <div class="voucher-info">
    <div class="voucher-content">
      INFO
    </div>
  </div>
</div>