Custom bottom border on div using mask - html

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>