This is an example using a (PNG) border-image. It only requires a single image, but there is a bit of work setting the image up to work correctly. It must have the element fill texture in the middle, which will tile seamlessly at the slice point, the all 4 sides with alpha channel, which must also tile at the same slice point, then all 4 corners which must tile also.
It is fully responsive with the image scaling to a size where an integer number of tiles with fit the element size.
Luckily I had the image already prepared having previously used it in a site.
But the trick here is to have the image prepared to properly tile and setting the slice value to the tile edge.
2 Likes