How to limit semi-circles on coupon cards

I have a problem when creating a card with a semicircle on each side of its left and right, this semicircle I want to limit to appear only 4, but with background-repeat, it appears infinitely. Can I reduce those half circles?

Expectation:

Reality:

.card-coupon {
    height: 120px;
    border-radius: 6px;
    /* border: 1px solid #f5f5f5; */
    width: 100%;
    max-width: 300px;
    padding: 12px 18px;
    background: radial-gradient(8px at left, #0000 98%, #fff) left,
      radial-gradient(8px at right, #0000 98%, #fff) right;
    background-size: 50.5% 29.2px;
    background-position: top 28.35px left, top 28.35px right;
    background-repeat: repeat-y;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.12));
}

body {
    background: gray;
}

<div class="card-coupon"></div>

So, I want the results to be the same as expected. Thank you 🙂

You need to sign in to view this answers

Related Post