Search

Border Images - ボーダー画像

  1. border-image CSS3～〔ボーダー画像プロパティの一括指定〕
  2. border-image-outset CSS3～〔ボーダー画像のはみだし方法〕
  3. border-image-repeat CSS3～〔ボーダー画像の繰り返し・角丸・伸縮方法〕
  4. border-image-slice CSS3～〔ボーダー画像の内側のオフセット〕
  5. border-image-source CSS3～〔ボーダーに使用する画像〕
  6. border-image-width CSS3～〔ボーダー画像の幅〕

参考：CSS Backgrounds and Borders Module Level 3、Safari CSS Reference、CSS - MDN

border-image CSS3～
ボーダー画像プロパティの一括指定

2011/12/1

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'>? [ / <'border-image-outset'> ]? ]? || <'border-image-repeat'>
-webkit-border-image: function top right bottom left / top_border right_border bottom_border left_border x_repeat y_repeat
border-image: none | [ <image> [ <number> | <percentage> ]{1,4} [/ <border-width>{1,4}]? ] && [ stretch | repeat | round ]{0,2}

border-imageプロパティは、個々のボーダ画像プロパティを一括指定できるショートハンドです。 ボーダー部分に画像を指定することができます。

  • デフォルト値：各プロパティの値を参照
  • 適用：全要素（border-collapseにcollapseが指定されているtable要素を除く）
  • 継承：しない

サポート

Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ×

設置サンプル

▼使用画像
　

サンプルを見る
<style type="text/css">
#d_borderimage div{
	border-width:15px;
	width:400px;
	margin:10px; padding:15px 25px;
	text-align:center; font-weight:bold; color:#ff6699;
}
#d_borderimage div.sample1 {
	border-image:url(/content/img/css/border.png) 20 20 round;
	-webkit-border-image:url(/content/img/css/border.png) 20 20 round;
	-moz-border-image:url(/content/img/css/border.png) 20 20 round;
	-ms-border-image:url(/content/img/css/border.png) 20 20 round;
	-o-border-image:url(/content/img/css/border.png) 20 20 round;
}
#d_borderimage div.sample2 {
	border-image:url(/content/img/css/border2.png) 20 20 stretch;
	-webkit-border-image:url(/content/img/css/border2.png) 20 20 stretch;
	-moz-border-image:url(/content/img/css/border2.png) 20 20 stretch;
	-ms-border-image:url(/content/img/css/border2.png) 20 20 stretch;
	-o-border-image:url(/content/img/css/border2.png) 20 20 stretch;
}
</style>

<div id="d_borderimage">
	<div class="sample1">border-image:url(/content/img/css/border.png) 20 20 round</div>
	<div class="sample2">border-image:url(/content/img/css/border2.png) 20 20 stretch</div>
</div>
表示例：Chrome表示例：Chrome

border-image-outset CSS3～
ボーダー画像のはみだし方法

2011/12/1

border-image-outset: [ <length> | <number> ]{1,4}

border-image-outsetプロパティは、ボーダー領域をを基準よりどれだけ外に広げるかをボーダーの幅の倍数で指定します。

  • デフォルト値：0
  • 適用：全要素（border-collapse:collapseが指定されているテーブル要素は除く）
  • 継承はされません。

border-image-repeat CSS3～
ボーダー画像の繰り返し・角丸・伸縮方法

2011/12/1

border-image-repeat: [ stretch | repeat | round ]{1,2}

border-image-repeatプロパティには、ボーダーの背景画像の繰り返し方法を指定します。

  • デフォルト値：stretch
  • 適用：全要素（border-collapse:collapseが指定されているテーブル要素は除く）
  • 継承：しない

値

background-image-repeatプロパティの値
値説明
stretch画像を領域いっぱいに拡大して表示する。
repeat画像を縦横両方向に繰り返してタイル状に敷き詰めて表示する。
round画像を繰り返してタイル状に敷き詰めて表示する。ただし、太いるが領域内に収まらない場合は、画像を縮小して、領域内にフィットするようにする。spaceと異なり、画像間に空白はあかない。

サポート

Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ×

設置サンプル

サンプルを見る
<style type="text/css">
#d_borderimagerepeat div {
	border-width:15px;
	width:400px;
	margin:10px; padding:15px 25px;
}
#d_borderimagerepeat div.d_stretch {
	border-image:url(/content/img/css/border.png) 20 20 stretch ;
	-webkit-border-image:url(/content/img/css/border.png) 20 20 stretch;
	-moz-border-image:url(/content/img/css/border.png) 20 20 stretch;
	-ms-border-image:url(/content/img/css/border.png) 20 20 stretch;
	-o-border-image:url(/content/img/css/border.png) 20 20 stretch;
}
#d_borderimagerepeat div.d_repeat {
	border-image:url(/content/img/css/border.png) 20 20 repeat ;
	-webkit-border-image:url(/content/img/css/border.png) 20 20 repeat;
	-moz-border-image:url(/content/img/css/border.png) 20 20 repeat;
	-ms-border-image:url(/content/img/css/border.png) 20 20 repeat;
	-o-border-image:url(/content/img/css/border.png) 20 20 repeat;
}
#d_borderimagerepeat div.d_round {
	border-image:url(/content/img/css/border.png) 20 20 round ;
	-webkit-border-image:url(/content/img/css/border.png) 20 20 round;
	-moz-border-image:url(/content/img/css/border.png) 20 20 round;
	-ms-border-image:url(/content/img/css/border.png) 20 20 round;
	-o-border-image:url(/content/img/css/border.png) 20 20 round;
}
</style>

<div id="d_borderimagerepeat">
	<div class="d_stretch">stretch</div>
	<div class="d_repeat">repeat</div>
	<div class="d_round">round</div>
</div>
表示例：Chrome表示例：Chrome

border-image-slice CSS3～
ボーダー画像の内側のオフセット

2011/12/1

border-image-slice: [<number> | <%>]{1,4} && fill?

border-image-sliceプロパティには、ボーダーの背景画像のスライス方法を指定します。

4つの値は、画像の上右下左それぞれの端からオフセットを表し、画像を9つの領域（4つの角、4つのエッジ、中間）に分けます。

  • デフォルト値：100%
  • 適用：全要素（border-collapse:collapseが指定されているテーブル要素は除く）
  • 継承：しない

サポート

Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ×

設置サンプル

例

サンプルを見る
<style type="text/css">
#d_borderimagerslice1 {
	border-image-source:url(/content/img/css/border.png);
	border-image-slice:60;
	border-image-width:15px;
	border-image-outset:0;
	border-image-repeat:stretch;

	border-image:url(/content/img/css/border.png)  60 / 15px stretch;
	-webkit-border-image:url(/content/img/css/border.png) 60 / 15px stretch;
	-moz-border-image:url(/content/img/css/border.png) 60 / 15px stretch;
	-ms-border-image:url(/content/img/css/border.png) 60 / 15px stretch;
	-o-border-image:url(/content/img/css/border.png) 60 / 15px stretch;
	padding:10px;
}
</style>

<div id="d_borderimagerslice1">border-image-slice</div>
表示例：Chrome表示例：Chrome

例：木枠風

素材：Chalkboard icon psd by Manuel López Muñiz - Designmoo

サンプルを見る
<style type="text/css">
#d_borderimagerslice2 div {
	border-image-source:url(/content/img/css/frame.png);
	border-image-slice:12;
	border-image-width:12px;
	border-image-outset:0;
	border-image-repeat:stretch;

	border-image:url(/content/img/css/frame.png) 12 / 12px stretch;
	-webkit-border-image:url(/content/img/css/frame.png) 12 / 12px stretch;
	-moz-border-image:url(/content/img/css/frame.png) 12 / 12px stretch;
	-ms-border-image:url(/content/img/css/frame.png) 12 / 12px stretch;
	-o-border-image:url(/content/img/css/frame.png) 12 / 12px stretch;
}
div .pic1 {
	float:left;
	width:320px;
}
div .pic2 {
	width:120px;
	float:right;
}
</style>

<div id="d_borderimagerslice2" class="cf">
	<div class="pic1"><img src="/content/img/pic1.png" alt="ドーナツ" /></div>
	<div class="pic2"><img src="/content/img/pic1-thumb.png" alt="ドーナツ" /></div>
</div>
表示例：Chrome表示例：Chrome

border-image-source CSS3～
ボーダーに使用する画像

2011/12/1

border-image-source: none | <image>
<image> = none | url('画像URL')

border-image-sourceプロパティは、ボーダーの背景画像を指定します。

  • デフォルト値：none
  • 適用：全要素（border-collapse:collapseが指定されているテーブル要素は除く）
  • 継承：しない

border-image-width CSS3～
ボーダー画像の幅

2011/12/1

border-image-width: [ <length> | <%> | <number> | auto ]{1,4}

border-image-widthプロパティには、、ボーダーの四隅の高さを指定します。

  • デフォルト値：1
  • 適用：全要素（border-collapse:collapseが指定されているテーブル要素は除く）
  • 継承：しない

サポート

Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ×

設置サンプル

例：テープ

下記の画像をボーダー画像に指定し、テキストに角度を付けてテープ風に表示しています。

使用画像

サンプルを見る
<style type="text/css">
#d_borderimagerwidth1 {
	border-image:url(/content/img/css/tape_yellow.png) 5 5 0 5 / 5px 5px 0 5px;
	-webkit-border-image:url(/content/img/css/tape_yellow.png) 5 5 0 5 / 5px 5px 0 5px;
	-moz-border-image:url(/content/img/css/tape_yellow.png) 5 5 0 5 / 5px 5px 0 5px;
	-ms-border-image:url(/content/img/css/tape_yellow.png) 5 5 0 5 / 5px 5px 0 5px;
	-o-border-image:url(/content/img/css/tape_yellow.png) 5 5 0 5 / 5px 5px 0 5px;
	margin:10px; padding:10px 0 20px 20px;
	width:15em;
	line-height:1;
}
#d_borderimagerwidth1 span {
	transform: rotate(-2deg); 
	-webkit-transform: rotate(-2deg); 
	-moz-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	display:block;
}
</style>

<div id="d_borderimagerwidth1"><span>border-image-width</span></div>
表示例：Chrome表示例：Chrome

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop