border-image

このエントリーをはてなブックマークに追加

border-imageはボーダー画像を指定するためのプロパティです。

このプロパティでborder-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeatの値をまとめて指定することができます。

.target{
	width:27px;
	height:27px;
	border: 27px solid orange;
	border-image:url("/sample/images/border.png") 27  / 1 round;
}

sample

対応ブラウザ

IE Chrome Safari Firefox iOS Android
◯ 11〜 ◯ 15〜 △ 5.1〜
◯ 7〜
◯ 15〜 △ 3.2〜
◯ 6〜
△ 2.1〜
◯ 4.4〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。

参考URL

6.7. Border Image Shorthand: the ‘border-image’ property - CSS3 - W3C

登録日 : 2014年07月21日 最終更新日 : 2014年7月21日

同じカテゴリー(Border)のエントリー

検索

スポンサードリンク

バージョン

リファレンス