Custom top border on div only at the top ot using mask

Question

Hi i want effect like this on my div but only at the top:

I know there is css mask property but it's really complicated to me.

My solution is I created single circle svg and repeat it multiple times but i also need that left/right space.

.container {
  margin: 20px 0;
  height: 400px;
  background: lightgray;
  position: relative;
}

.svg {
  background: url('../../assets/circle-gapped.svg');
  height: 100%;
  background-repeat: repeat-x;
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
}

<div class="container">
  <div class="svg" />
</div>

I don't know how to upload assest to snippet, this is result of above code:

Answer 1

Like below:

.box {
  width:300px;
  height:200px;
  background:red;
  -webkit-mask:  /*  20px = radius of circle    50px = 2*radius + 10px (distance between circles)*/
    radial-gradient(circle 20px,transparent 97%, #fff 100%) bottom/50px 200%,
    linear-gradient(#fff 0 0) left /20px 100% no-repeat, /* 20px of left border */
    linear-gradient(#fff 0 0) right/20px 100% no-repeat; /* 20px of right border */
}

<div class="box"></div>

Or like below to have responsiveness:

.box {
  height:200px;
  background:red;
  padding:0 50px;
  -webkit-mask:
    radial-gradient(circle 20px,#fff 97%, transparent 100%) bottom/50px 200% space content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite: exclude;
}

<div class="box"></div>

Answer 2

You can do this with a pseudo element on the gray div which has a repeating pattern of radial-gradient circles which are 50% radius gray and transparent for the outer 50%. Of course alter the dimensions and positions to give the exact look you want.

div.yellow {
background-color:yellow;
width: 100vw;
height: 80vh;
}
div.gray {
background-color: gray;
height: 20vh;
width: 100vw;
position: relative;
top: 0;
}
div.gray::after {
 content:' ';
 width: 100vw;
 height: 10vh;
 background-color: transparent;
 position: absolute;
 top: 15vh;
 left: 0;
 z-index: 2;
 background-image: radial-gradient(gray,gray 50%,transparent 50%);
 background-size: 10vh 10vh;
 }

<div class="gray"></div>
<div class="yellow"></div>