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

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>

CodePudding user response：

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

CodePudding user response：

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>