border-image for all modern browsers

HTML

<h2 class="borderimage">xzXzX</h2>

<img src="http://grochtdreis.de/fuer-jsfiddle/photo-bg.png" alt="">

CSS

body {
    background: #dedede;
    padding: 30px;
}

.borderimage {

       -moz-border-image:url("https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg") 4 8 7 6 round;
    -webkit-border-image: url("http://grochtdreis.de/fuer-jsfiddle/photo-bg.png") 4 8 7 6 round;               
         -o-border-image:url("http://grochtdreis.de/fuer-jsfiddle/photo-bg.png") 4 8 7 6 round;
   

    

    /*
        -moz-transform: rotate(3deg);
     -webkit-transform: rotate(3deg);
          -o-transform: rotate(3deg);
             transform: rotate(3deg);
    */
}

JavaScript

// if you include the unprefixed version, Chrome will loose the background-color - border-image is somehow broken in Chrome 
    
// border-image: url("http://grochtdreis.de/fuer-jsfiddle/photo-bg.png") 4 8 7 6 round;