It seems it can all be done with one image if properly prepared.
Here is a quick example:-
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Border</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
body {
background: #333;
}
main {
background: #bbb;
max-width: 60em;
width: 80%;
margin: 2em auto;
padding: 2em;
box-sizing: border-box;
border: 50px solid #000; /* Fall-back for calc & vw */
border: calc(3vw + 1.5em) solid #000; /* dynamic responsive width */
border-image-source: url(border.jpg);
border-image-slice: 70;
border-image-repeat: repeat;
}
</style>
</head>
<body>
<main>
<h1>Responsive Image Border</h1>
<p>This uses a single image for the whole border with the diferent parts for the edges and corners defined by the slice property.</p>
<p>Lorem ipsum dolor sit amet, eos utroque expetenda ad, te choro pericula voluptaria nam.
Patrioque consequat democritum qui te, iriure eligendi eam cu.
Saepe delicata id mea.
Vel ea alia verterem neglegentur, ut nemore suscipit abhorreant ius.
In tale verterem quaestio eos, falli dolorem percipit cu mei.</p>
<p>Pri offendit comprehensam et, vis et dolor alterum. Pri eu aperiri legimus, deserunt lobortis no usu.
Pro id persius nostrud voluptaria, qualisque prodesset disputationi vim no, omnes primis disputationi vis in.
Ex sit mollis utamur percipitur, duo eu case nulla suscipiantur.</p>
</main>
</body>
</html>
Using this image adapted from the one I found earlier.
