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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

you need a width value before the strech property

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

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>