JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li>Span added via jQuery:
        <img src="http://i.imgur.com/ZLmYjVc.png" />
    </li>
</ol>

CSS

.image-border {
    display:inline-block;
    position:relative;
    padding:6px;
    background: url(http://i.imgur.com/0yCz3oA.png) top left, url(http://i.imgur.com/fWtyg99.png) top right, url(http://i.imgur.com/UcOam5I.png) bottom left, url(http://i.imgur.com/pjYWHyM.png) bottom right;
    background-repeat: no-repeat;
}
.image-border img {
    position:relative;
    display:block;
    margin:-3px;
    z-index:-1;
}

JavaScript

$('img').wrap('<span class="image-border"></span>');