How to propertly set an image as border

Question

I'm new to HTML and CSS, my task is to set an already prepared image as border.

What I'm doing wrong?

div {
  width: 240px;
  height: 510px;
  background-color: lightblue;
  border-image: url(https://i.ibb.co/TqBJP5d/border-1.png) stretch;
}

<div>
    123
</div>

Answer 1

you need a width value before the strech property

 border-image: url(https://i.ibb.co/TqBJP5d/border-1.png) 30 stretch;

Answer 2

More info here

Working example with your code:

   .bordered-box {
  width: 140px;
  height: 510px;
  background-color: lightblue;
  border: 34px solid transparent;
  border-image: url(https://i.ibb.co/TqBJP5d/border-1.png) stretch 38;
  border-image-outset: 18px 19px 10px 12px;
  margin: 40px;
}

<div>
  <div class="bordered-box">
    123
  </div>
</div>

Answer 3

Add Border width on your div with transparency.

div {
  width: 240px;
  height: 510px;
  background-color: lightblue;
  border: 39px solid transparent;
  border-image: url(https://i.ibb.co/TqBJP5d/border-1.png) stretch 38;
 
}

<div>
123
</div>