How to create a scalloped border around a div containing bg content using CSS

So, first this question (which I decided not to actually comment) should be answered:

To kind of re-word what Haworth just said, if someone provides an extremely long image, how do you expect the border to look. Super long arches? Or a greater number of arches, that cut off at a certain point? Or perhaps we stretch the arches, up until the point we can safely increment the number of arches without any cut-off.

But, I think it's safe to say option #3 is the no-brainer best option in all cases, so let's go for that.

The solution to your problem is... border-image - exactly what you've already tried.

You mentioned "I’ve experimented with CSS mask and border-image, but I’m hitting a wall. I cannot use static PNG/SVG images as borders because it needs to be responsive and reusable." however, static PNG/SVG images can still produce responsive and reusable code.

The MDN docs for border-image has a perfect example of this:

body {
  text-align: center;
  align-content: center;
}
#example-element {
  display: inline-block;
  width: 68%;
  height: 100%;
  font-size: 1.2em;
  padding: 50px;
  border: 30px solid;
  background: #fff3d4;
  resize: both;
  & {
    border-image: url("https://950f06c4-f64f-4630-8981-2d161b0d175c.mdnplay.dev/shared-assets/images/examples/border-diamonds.png") 30 / 30px / 0 round;
  }
}

  This is a box with a border around it.

Your attempt of using border-image (as shown by the Codepen) was simply just wrong.

Border image is pretty confusing, I know the CSS Tricks article has been floating around, so it's probably a good method of explaining it: https://css-tricks.com/almanac/properties/b/border-image/ (although, I haven't personally gone through it 'all').

The first issue with your attempt is that you used an image that wasn't best suited for task. If you look at the image below, it's clear that you tried to essentially edit/crop the image you provided, to turn them into semi-circles. But it's best to do that in the image itself using an image editor.

So, your ideal pattern image should look like:

This isn't the main issue though, that comes from your code. It wasn't sliced properly, it should be specifically based on the provided source image. Once done properly, it'll be fully flexible and responsive.

Like so: https://codepen.io/TigerYT/pen/gbawYjE. The pen has a resize button in the bottom-right which you can use to check if the image is fully responsive or not. Since the image is based on pixels, you can use the browser's zoom in/out (ctrl +/-) to see if the resolution suffers or not. If you think the border is too large / don't see enough of the original image, update the border-image-width, not the border-width, if you decrease - you'll notice perfect "ripples" forming, still with no sudden cuts or loss in image quality.

It's probably worth noting, if you think the border is low quality... that's because I used a low quality 1230x1280 image, where I manually removed the actual image behind it - pixel by pixel - to extract the border. I assume you have the original border image, otherwise you can create one using vector image editor like Affinity Designer (my recommendation) or Adobe Illustrator (keep away - imo), and scale up the image to 4k, 8k, or just use SVG (my recommendation).