「CSS3入門」border-imageを利用するサンプル

2019年12月29日

border-image
指定された要素の周りに画像を描く

指定可能のプロパティ
border-image-source, border-image-slice, border-image-width, border-image-outset

サンプルコード

<style> 
div
{
	border:15px solid transparent;
	width:150px;
	padding:5px 10px;
}

#round
{
	-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
	-o-border-image:url(border.png) 30 30 round; /* Opera */
	border-image:url(border.png) 30 30 round;
}
</style>

<div id="round">test data</div>