Is there a way to use an image as the border for my div elements?
The key requirement is that the border must be positioned outside the box without affecting its size. It's important to note that all div items have the same width, but varying heights.
I am aiming for a result like this:
Here is the border image I want to use:
.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>