Is it possible to add an `outline-image` in the same was as a `border-image` in CSS?

Question

I am using a colored outline around an object in a React project. I need to use outline rather than border because I need the outline to be responsive to z-index, which, according to this answer, it's not.

.box-with-border {
  margin-top: 5px;
  padding: 10px;
  border: 12px solid black;
  border-image: url("https://www.woodsolutions.com.au/sites/default/files/styles/detail_image/public/Eucalyptussaligna.jpg?itok=eQVoCQTG") 20 / 19px round;
  display: flex;
}

.box-with-outline {
  margin-top: 20px;
  outline: 12px solid black;
  display: flex;
}

<div class="App">
  <div class="box-with-border">I have a nice wood border</div>
  <div class="box-with-outline">I have an outline, but no wood :(</div>
</div>

CodeSandbox