How to set a very specific image as a border - html

Question

I want to set an image as the border of my div's
The main rule is: border should be outside the box and not increasing the size of a box. Also note that div's (items) have the same width, but not the same height.
The result i want to see: https://dc579.4shared.com/img/JjmymoBWiq/s23/17d090e2630/result
Border image: https://dc614.4shared.com/img/2uaeGtwfea/s23/17d090b76b0/border-1
.container {
display: flex;
justify-content: space-around;
}
.product1 {
width: 200px;
height: 500px;
background-color: blue;
}
.product2 {
width: 200px;
height: 550px;
background-color: green;
}
.product3 {
width: 200px;
height: 520px;
background-color: red;
}
.item {
border: 20px;
border-image: url("https://dc614.4shared.com/img/2uaeGtwfea/s23/17d090b76b0/border-1")
}
<div class="container">
<div class="product1 item">
123
</div>
<div class="product2 item">
123
</div>
<div class="product3 item">
123
</div>
</div>

Answer 1

I think you have to specifiy the color and mode as well:
.item{
border: 20px solid #555;
...
}
Might work might not, I'm not not a web developer but have played with it and this might solve it

Answer 2

Probably, the border-image is not ideal for you in this case.
I created an alternative way to achieve the look you want.
Essentially, I added a <span>NEW</span> element with absolute positioning inside each .item element. If you need to move around the span, modify the top and right css attributes.
.container {
display: flex;
justify-content: space-around;
}
.product1 {
width: 200px;
height: 500px;
background-color: blue;
}
.product2 {
width: 200px;
height: 550px;
background-color: green;
}
.product3 {
width: 200px;
height: 520px;
background-color: red;
}
.item {
border: 10px solid rgb(255, 107, 107);
position: relative;
}
.item span {
position: absolute;
top: -20px;
right: -25px;
background-color: red;
padding: 5px;
border-radius: 5px;
color: white;
z-index: 10;
}
<div class="container">
<div class="product1 item">
<span>NEW</span>
123
</div>
<div class="product2 item">
<span>NEW</span>
123
</div>
<div class="product3 item">
<span>NEW</span>
123
</div>
</div>