'How to propertly set an image as border

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>
htmlcssborder-image


Solution 1:[1]

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>

Solution 2:[2]

you need a width value before the strech property

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

Solution 3:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 jeremy-denis
Solution 3 Zain

Related Questions