I try to use an image as a border image for a div.

The div width and height changes (I don't know how the dimensions will be)

The border-images width and height changes (I don't know how the dimensions will be)

I really tried to understand what is slicing doing, but I can't get a dynamic formula so that any given border-image will look good for any given div size (look good = not sctreched, filled,nicely repeated as long the border-image is seamless)

for a given border-image pineapple.png with a dimension 1584x1200px => 105 133 round looks good, but how do I get this magic numbers? What numbers use there for slice to get a crispy border-image regarding not violating its proportions? Is it depending on the div size AND the border-image size?

div{
background:red;
height:100px;
width:400px;
border: solid 5vmin transparent;
border-width: 5.67909vmin;
border-image: url(https://cdn.dribbble.com/users/4297010/screenshots/7740500/media/7c2554596ed3249419127182c5199e65.jpg)105 133 round;
}

<div>
</div>

Javascript solutions are also much appreciated