Intento usar una imagen como imagen de borde para un div.

Los cambios de ancho y alto div (no sé cómo serán las dimensiones)

Los cambios de ancho y alto de las imágenes del borde (no sé cómo serán las dimensiones)

Realmente traté de entender qué está haciendo el corte, pero no puedo obtener una fórmula dinámica para que cualquier imagen de borde se vea bien para cualquier tamaño de div dado (se vea bien = no rasgado, relleno, bien repetido mientras el borde- la imagen es perfecta)

para una imagen de borde dada piña.png con una dimensión de 1584x1200px => 105 133 redondo se ve bien, pero ¿cómo obtengo estos números mágicos? ¿Qué números usan allí para cortar para obtener una imagen de borde crujiente con respecto a no violar sus proporciones? ¿Depende del tamaño div Y del tamaño de la imagen del borde?

 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>

Las soluciones Javascript también son muy apreciadas.