<html>
<head>
    <style>
        div {
            width: 83px;
            height: 60px;
            margin: 10px;
            display: inline-block;
            border-style: solid;
        }

        .text-image {
            border-width: 21px 30px 30px 21px;
            -webkit-border-image: url("resources/border-image.png") 21 30 30 21;
        }

        .diamond-image {
            border: 15px solid transparent;
            border-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAADsklEQVR4Xu3cSXbbMAwAUOpk7SnSZdOTNd3mkq5ki7YlTgCIgXqEt7GE4AePIiGGS/gOt2Dx+QgLJeztO3yu1/1YPsIfyvVW+S5WgQMBekf+uwN/kbCNCusy0CfkWMx4bIcuDwQFZBq2Q+ehG8h4bIdOoYHIOGyHPkIjkeHYDv2CJiLDsB364dSJ3MZ2aDbkOvbs0EyVfH6ipvPsmaGFkPOVPSu0MHKKPSO0EvIRezbotWW4dd9ig4jUiCNc9LW2DLfun/rHrKlkAn0L/5Yl/FZXXgOaQW9tUtWhY0P+tVbzbENH7EerYEfkrZRnhWZcDRbaf3slx5/ODC2G/V7JDs3WTDq1/06V7NAnn8fL175pX66SHTodWrsekDXk2R+GuacYCbuF7NCFCQNmGIEgO3R5rQaqbCiyQ9cXxVVsDLJDt7sPWWwsskO3oZNFDQXZoWHQT+xb+HlvEFE+Zktwyi+7XtO9q5MY1+qy3nx7ts727eq0EiPE5djFioZm29VJSNjiEq58UdCsuzot1JAxOfMFQ4MWDiHg9ysjk9f6One+IGhg0GhweWyJfJvQyKCXx5bKtwpNDHpZbMl8i9CdQS+HLZ1vFpop6GWwNfJNoJmDDo+tle8BWijosNia+T6hhYMOh62d7x1aKegw2Bb56u5/ey3rzBY1ysiv4jIJTG3aM6y/zfJVHzoMkePfSRV7z1f3YTgAsir2W75607uBkFWwT/nqLFgGRBbFzuQrvwQfGFkEu5CvbFPpAsis2JV85dqkF0JmwW7kK9P4vyByFzYg3yY0ep4NCMqw7hC9BWqeDcwXBA3GBgYVVWK6OQgbkS8YuomNCMpkIX6bKjYyXxR0ERsZVFyIMUAWm5AvGjrBJgRldFC51QGbmC8J+onds6tThYgvyB27I1/T/wWnMOzV5WeTgvH8bFIwVd8XkdCFGQD+TY3ZRnSjwJjTdhtzWhy2Ub7Dj9GghQNmF6tDpyMREDleCKtshz5CI5Hh2A79giYiw7Ad+uHUidzGdmg25Dr27NBMlXx+ovrZpO/zaCHkfGXPWtHCyCn2jNBKyEfs2aBNjszcVpB+Nmlfjwp09da097NJQVT0L8U3I7MNHX42Kb1mcFe+9aNFH4rnd3yzVnT864hg516kzg7N2OfYmyZ+NukDovAqi6Wya1sCvKKZ2qStfRcOzdD4byFvIRw6nbSghhEIskOXZ4YgbCiyQ9en4Jy7On3oaCx3uHZ1OjRgXcmxq9OhAdDPRU3Hrk4r6P9CduKlL0jWvgAAAABJRU5ErkJggg==) 30 30;
        }

        div.round-round {
            border-image-repeat: round round;
        }

        div.round-stretch {
            border-image-repeat: round stretch;
        }

        div.repeat-round {
            border-image-repeat: repeat round;
        }

    </style>
</head>
<body>
    <div class="text-image round-round"></div>
    <div class="text-image round-stretch"></div>
    <div class="text-image repeat-round"></div>
    <br>
    <div class="diamond-image round-round"></div>
    <div class="diamond-image round-stretch"></div>
    <div class="diamond-image repeat-round"></div>
</body>
</html>