[SOLVED] CSS: How do I get a "border-image" to animate on Chromium? It works on Firefox and Safari. Is there an alternative method that fits my usecase?

CSS: How do I get a "border-image" to animate on Chromium? It works on Firefox and Safari. Is there an alternative method that fits my usecase?

I am coding a minimal personal site and ran into an issue with a CSS "border-image" effect only animating on Firefox and Safari. On Chrome/Edge/other Chromium browsers, only the 4 edges will have any movement. I have tried using both GIFs and APNGs as borders with the same issue. I am looking for a fix or an alternative way to apply a border that'll give the exact same effect without warping the border image. Preferably a pure CSS solution. Thank you!!

Here is the animated border on Firefox: Firefox view

Here is the animated border issue if viewed on Chrome: Chromium animation issue

Here's the code snippet I am running into issues with. Using placeholder images for this post.

body {
  background-color: black;
}

.bordered-pic {
  width: 150px;
  height: 150px;
  border: 7px solid transparent;
  border-image: url("https://i.ibb.co/C5gx5wfM/testfiregif.gif") 9 round;
  -moz-border-image: url("https://i.ibb.co/C5gx5wfM/testfiregif.gif") 9 round;
  -webkit-border-image: url("https://i.ibb.co/C5gx5wfM/testfiregif.gif") 9 round;
  -o-border-image: url("https://i.ibb.co/C5gx5wfM/testfiregif.gif") 9 round;
}

<!DOCTYPE html>
<html lang="en">

<body>
  <img class="bordered-pic" src="https://i.ibb.co/5hmzJCBL/pic.jpg">
</body>

</html>

Thank you for any help you can provide!

Solution

Use the gif as a background instead:

body {
  background-color: black;
}

.bordered-pic {
  width: 150px;
  height: 150px;
  border: 7px solid transparent;
  background: url("https://i.ibb.co/C5gx5wfM/testfiregif.gif") 50%/100% 100% border-box;
}

<img class="bordered-pic" src="https://i.ibb.co/5hmzJCBL/pic.jpg">