<div class="problem card">
  <picture>
    <img width="320" src="https://assets.codepen.io/2585/gui-skull.png" alt="">
  </picture>
  <footer>my corners show <b>the problem</b></footer>
</div>

<div class="var-solution card">
  <picture>
    <img width="320" src="https://assets.codepen.io/2585/gui-skull.png" alt="">
  </picture>
  <footer>my corners solved with <b>CSS vars</b></footer>
</div>

<div class="clip-solution card">
  <picture>
    <img width="320" src="https://assets.codepen.io/2585/gui-skull.png" alt="">
  </picture>
  <footer>solved with <b>overflow-clip-margin</b></footer>
</div>

@import "https://unpkg.com/open-props" layer(base);
@import "https://unpkg.com/open-props/normalize.min.css" layer(base);

@layer demo {
  .card {
    display: grid;
    background: var(--surface-2);
    padding: var(--size-3);
    border-radius: var(--radius-4);
  }
  
  .problem picture {
    border-radius: var(--radius-4) var(--radius-4) 0 0;
  }
  
  .problem footer {
    border-radius: 0 0 var(--radius-4) var(--radius-4);
  }
  
  /*  solution is to subtract the padding from the radius  */
  .var-solution.card {
    --fixed: calc(var(--radius-4) - var(--size-3));
  }
  
  .var-solution.card picture {
    border-radius: var(--fixed) var(--fixed) 0 0;
  }
  
  .var-solution.card footer {
    border-radius: 0 0 var(--fixed) var(--fixed);
  }
  
  /* solution uses a clever margin overflow style */
  .clip-solution.card {
    overflow: clip;
    overflow-clip-margin: content-box;
  }
}

@layer demo.support {
  body {
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }
  
  .card picture {
    background: var(--surface-1);
  }
  
  .card footer {
    padding: var(--size-3);
    background: var(--surface-3);
  }
}