JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<h1>Verwendung von <code>border-image</code></h1>
<main>
	<p class="stretch">Textabsatz mit stretch.</p>
	<p class="repeat">Textabsatz mit repeat.</p>
	<p class="space">Textabsatz mit space.</p>
	<p class="round">Textabsatz mit round.</p>
</main>

CSS

p {
	border: solid #aaa;
	border-width: 99px 102px;
	padding: 2em;
	width: 20em;
	background:#818D94;
}

.stretch {
	-moz-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 stretch;
	-webkit-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 stretch;
	border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 stretch;
}

.repeat {
	-moz-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 repeat;
	-webkit-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 repeat;
	border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 repeat;
}

.space {
	-moz-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 space;
	-webkit-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 space;
	border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 space;
}

.round {
	-moz-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 round;
	-webkit-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 round;
	border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 round;
}