Como adicionar mais de uma imagem na borda de um elemento?

Front-end CSS
#1

Eu não tenho muitos conceitos de css e gostaria muito de criar um elemento com bordas diferentes.
Exemplo:

.elemento {
     border-left: url(borda-vertical-esquerda.png);
     border-left-width: 25px;

     border-right: url(borda-vertical-direita.png);
     border-right-width: 25px;

     border-top: url(borda-horizontal-cima.png);
     border-top-width: 25px;

     border-bottom: url(borda-horizontal-baixo.png);
     border-bottom-width: 25px;
}

alguem saberia como fazer-lo?

#2

Olá

Tem o border-image, mas teria q juntar as imagens em uma

www.border-image.com/

https://developer.mozilla.org/pt-BR/docs/Web/CSS/border-image

#3

Caso não tenha entendido, montei um de teste usando a imagem

http://www.border-image.com/#{"src"%3A"http%3A%2F%2Fwww.guj.com.br%2Fuploads%2Fdefault%2Foriginal%2F3X%2Fe%2Fa%2Feaa1540137b33814d249bc5d5db4d28b3250b1cd.png"%2C"linkBorder"%3Atrue%2C"borderWidth"%3A[0%2C0%2C0%2C0]%2C"imageOffset"%3A[32%2C32%2C32%2C32]%2C"fill"%3Atrue%2C"setRepat"%3Afalse%2C"repeat"%3A["round"%2C"round"]%2C"scaleFactor"%3A3%2C"setRepeat"%3Atrue}