Custom bottom border on div using mask

Question

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

What im doing right now is this:

.container {
  width: 500px;
  height: 150px;
  background: #FDCA40;
}

.box {
  width: 100%;
  height: 100px;
  background: #FE7448;
  -webkit-mask: radial-gradient(circle 20px, transparent 97%, #fff 100%) top/50px 200%;
  // not working:
  // -webkit-mask: radial-gradient(circle 20px, #FE7448 97%, #FE7448 100%) top/50px 200%;
}

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

Which property in mask allows me to give color to circle? Whole mask property is confusing to me.

Answer 1

You can do it like below:

.container {
  width: 500px;
  height: 150px;
  background: #FDCA40;
}

.box {
  height: 100px;
  background: #FE7448;
  -webkit-mask: 
    linear-gradient(#fff 0 0) 
      top/100% calc(100% - 20px) no-repeat,
    radial-gradient(circle closest-side, #fff 97%,transparent 100%) 
      bottom/50px 40px space; 
}

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

Using CSS variables to easily manage it:

.container {
  width: 500px;
  height: 150px;
  background: #FDCA40;
}

.box {
  --r:20px; /* radius */
  --d:10px; /* minimum distance between circles */
  
  height: 100px;
  background: #FE7448;
  -webkit-mask: 
    linear-gradient(#fff 0 0) 
      top/100% calc(100% - var(--r)) no-repeat, 
    radial-gradient(circle closest-side, #fff 97%,transparent 100%) 
      bottom/calc(2*var(--r) + var(--d)) calc(2*var(--r)) space; 
}

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

<div class="container">
  <div class="box" style="--r:30px;--d:0px;"></div>
</div>