Repeating sprites using border-image

dabblet.css

/**
 * Repeating sprites using border-image
 */
/**
 * It's just some border-image craziness, don't
  count this as a working solution: for repeating
  on both axis you'll need a hell of a hacks:
  not only the rendering is differ in webkits vs.
  other browsers, but there is a big difference in
  Safari vs. Chrome. I just went craze while dealing
  with it :)
  				         -- @kizmarh
 */

.repeat {
	position: relative;
	height: 16px;
	background: rgba(0,0,0,0.1);
	}
/* Using absolute positioning to enable `clip` */
.repeat:before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 144px;
	border: solid;
	border-width: 16px 0 0;
	}

/* Repeating a part of an image on one axis (easy) */
.repeat1:before {
	border-image: url(http://i.kizu.ru/misc/sprite.png) 16 32 32 0 round round;
	}
.repeat2:before {
	border-image: url(http://i.kizu.ru/misc/sprite.png) 16 round round;
	}
.repeat3:before {
	border-image: url(http://i.kizu.ru/misc/sprite.png) 16 0 32 32 round round;
	}
.repeat4:before {
	border-top-width: 48px;
	top: -32px;
	clip: rect(32px, auto, 48px, 0);
	border-image: url(http://i.kizu.ru/misc/sprite.png) 48 32 0 0 round round;
	}
.repeat5:before {
	border-top-width: 32px;
	top: -16px;
	clip: rect(16px, auto, 32px, 0);
	border-image: url(http://i.kizu.ru/misc/sprite.png) 32 32 16 0 round round;
	}
.repeat6:before {
	border-top-width: 32px;
	top: -16px;
	clip: rect(16px, auto, 32px, 0);
	border-image: url(http://i.kizu.ru/misc/sprite.png) 32 16 16 16 round round;
	}

/* And repeating on X and Y (don't do it in production) */
.repeat7:before {
	height: 48px;
	border: 16px solid;
	top: -32px;
	left: -16px;
	/* Need to repeat this for chrome but with fill keyword :( */
	border-image: url(http://i.kizu.ru/misc/sprite.png) 16 0 16 32 round round;
	border-image: url(http://i.kizu.ru/misc/sprite.png) 16 0 16 32 fill round round;
	clip: rect(16px, auto, 38px, 16px);
	transform: translate(0,50%) scale(1,2);
	}

@media all and (-webkit-min-device-pixel-ratio:0){
.repeat7:before {
	height: 56px;
	}
}

dabblet.html

    <p>Here is the sprite's image: <img src="http://i.kizu.ru/misc/sprite.png" /></p>
    <p>And here are the repeated parts:</p>
    <div class="repeat repeat1"></div>
    <div class="repeat repeat2"></div>
    <div class="repeat repeat3"></div>
    <div class="repeat repeat4"></div>
    <div class="repeat repeat5"></div>
    <div class="repeat repeat6"></div>
    <div class="repeat repeat7"></div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

https://jsbin.com/pukuyoy/edit?html,css,js,output