<div class="wrapper">
  <div class="corners corners--slanted">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.    
  </div>

  <div class="corners corners--round">
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.    
  </div>

  <div class="corners corners--square">
    <b>No FF</b> <br>
    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.    
  </div>

  <div class="corners corners--conic">
    <b>No FF</b> <br>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.    
  </div>
  
  <div class="corners corners--repeated-lines">
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.    
  </div>

  <div class="corners corners--repeated-circles">
    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.    
  </div>
</div>

:root {
  font-size: 14px;
}

BODY {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: #FFF;
  background-image: linear-gradient(
      to right,
      hsla(160, 100%, 75%, .5) 10%,
      transparent 0
  );
  background-size: .5rem 100%;
  font: 1rem/1.4 Trebouchet MS, sans-serif;
}

P {
  margin: 0;
  
  & + & {
    margin-top: 2rem;
  }
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
  max-width: 70vw;
  margin: 2rem;
}

.corners {
  min-height: 75px;
  padding: 2.25rem;
  background: linear-gradient(darkturquoise, aquamarine);
}

.corners--round {
  mask-image: 
    radial-gradient(
      circle at 1.5rem 1.5rem,
      transparent 1.5rem, 
      gold 0
    );
  mask-position: -1.5rem -1.5rem;
  mask-repeat: repeat;
}

.corners--slanted {
  mask-image: 
    linear-gradient(
      135deg,
      transparent 1.15rem, 
      gold 0
    ),
    linear-gradient(
      -135deg,
      transparent 1.15rem, 
      gold 0
    ),
    linear-gradient(
      45deg,
      transparent 1.15rem, 
      gold 0
    ),
    linear-gradient(
      -45deg,
      transparent 1.15rem, 
      gold 0
    );
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-size: 51% 51%;
}

.corners--square {
  mask-image: 
    conic-gradient(
      from -90deg at 1.5rem 1.5rem, 
      transparent .25turn, 
      gold 0
    ),
    conic-gradient(
      from 0deg at calc(100% - 1.5rem) 1.5rem, 
      transparent .25turn, 
      gold 0
    ),
    conic-gradient(
      from 180deg at 1.5rem calc(100% - 1.5rem), 
      transparent .25turn, 
      gold 0
    ),
    conic-gradient(
      from 90deg at calc(100% - 1.5rem) calc(100% - 1.5rem), 
      transparent .25turn, 
      gold 0
    )
  ;
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-size: 51% 51%;
}

.corners--conic {
  --step: calc(30% / 8.25);
  mask-image: 
    conic-gradient(
      from -90deg at 1.5rem 1.5rem, 
      transparent var(--step), 
      gold 0, gold calc(var(--step) * 2),
      transparent 0, transparent calc(var(--step) * 3), 
      gold 0, gold calc(var(--step) * 4),
      transparent 0, transparent calc(var(--step) * 5), 
      gold 0, gold calc(var(--step) * 6),
      transparent 0, transparent calc(var(--step) * 7), 
      gold 0, gold calc(var(--step) * 8)
    ),
    conic-gradient(
      from 0deg at calc(100% - 1.5rem) 1.5rem, 
      transparent var(--step), 
      gold 0, gold calc(var(--step) * 2),
      transparent 0, transparent calc(var(--step) * 3), 
      gold 0, gold calc(var(--step) * 4),
      transparent 0, transparent calc(var(--step) * 5), 
      gold 0, gold calc(var(--step) * 6),
      transparent 0, transparent calc(var(--step) * 7), 
      gold 0, gold calc(var(--step) * 8)
    ),
    conic-gradient(
      from 180deg at 1.5rem calc(100% - 1.5rem) , 
      transparent var(--step), 
      gold 0, gold calc(var(--step) * 2),
      transparent 0, transparent calc(var(--step) * 3), 
      gold 0, gold calc(var(--step) * 4),
      transparent 0, transparent calc(var(--step) * 5), 
      gold 0, gold calc(var(--step) * 6),
      transparent 0, transparent calc(var(--step) * 7), 
      gold 0, gold calc(var(--step) * 8)
    ),
  conic-gradient(
      from 90deg at calc(100% - 1.5rem) calc(100% - 1.5rem), 
      transparent var(--step), 
      gold 0, gold calc(var(--step) * 2),
      transparent 0, transparent calc(var(--step) * 3), 
      gold 0, gold calc(var(--step) * 4),
      transparent 0, transparent calc(var(--step) * 5), 
      gold 0, gold calc(var(--step) * 6),
      transparent 0, transparent calc(var(--step) * 7), 
      gold 0, gold calc(var(--step) * 8)
    )
  ;
  mask-size: 51% 51%;
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  mask-repeat: no-repeat;
  border-radius: 1.5rem;
}

.corners--repeated-lines {
  mask-image: 
    linear-gradient(
      135deg,
      transparent 1.25rem, 
      gold 0
    ),
    linear-gradient(
      -135deg,
      transparent .5rem, 
      gold 0, gold .75rem,
      transparent 0, transparent 1rem, 
      gold 0, gold 1.25rem,
      transparent 0, transparent 1.5rem, 
      gold 0
    ),
    linear-gradient(
      45deg,
      transparent .5rem, 
      gold 0, gold .75rem,
      transparent 0, transparent 1rem, 
      gold 0, gold 1.25rem,
      transparent 0, transparent 1.5rem, 
      gold 0
    ),
    linear-gradient(
      -45deg,
      transparent 1.25rem, 
      gold 0
    );
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-size: 51% 51%;
}

.corners--repeated-circles {
  mask-image: 
    radial-gradient(
      circle at 1.5rem 1.5rem,
      transparent 0, transparent 1rem, 
      gold 0, gold 1.25rem,
      transparent 0, transparent 1.5rem, 
      gold 0
    );
  mask-position: -1.5rem -1.5rem;
  mask-repeat: repeat;
}