項 目 | 説 明 |
---|---|
記述形式 | セレクタ {border-right: 値1 値2 値3 } |
値 の形式 | 値1~値3: border-right-style border-right-width border-right-color (順不同でブランクで区切る) |
初 期 値 | 各プロパティの初期値 |
対応ブラウザー | C1+ / e4+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
適用可能な要素 | すべての要素 |
継 承 | しない |
border-rightプロパティ は,要素の境界の右部分の スタイル(border-right-style)と 太さ(border-right-width)と 色(border-right-color) の 3つのプロパティをまとめて指定 します。
指定の方法は,これら3つのプロパティの値を順不同で半角ブランク(空白)を区切りとして並べます。
borderプロパティでは,上下左右の4つの境界の一括指定ができますが,margin や padding などの一括指定とは異なり,上下左右の4つの境界に対して異なる値を指定することはできません。 これらの指定が異なる場合には,対象部分に対する個別のプロパティ(border-top, border-bottom,border-left,border-right) を使用して,指定することが必要です。
また,border-rightプロパティ の指定を行うと,指定可能な3つのプロパティのうち指定のないものの値がリセットされて, 初期値に戻りますので,その目的でこの border-rightプロパティ を使用することもできます。(下記「例2」参照。)
3つのプロパティの値の指定方法の詳細については,それぞれのプロパティの解説を参照してください。
つぎの例から,borderプロパティ を指定すると,個別のプロパティ(border-top, border-bottom,border-left,border-right) の4つすべてで同じ値を指定した場合と同じ結果となることがわかります。
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.sample1 { width:320px; height:60px; border: solid red 3px; } div.sample2 { width:320px; height:60px; border-top: solid red 3px; border-right: solid red 3px; border-bottom: solid red 3px; border-left: solid red 3px; border-image: none 3px; } --> </style> |
HTML <body> ~ </body> |
<div class="sample1">
これが class="sample1" の部分です。
</div>
<br>
<div class="sample2">
これが class="sample2" の部分です。
</div> |
ブラウザー 表示例 |
---|
これが class="sample1" の部分です。
これが class="sample2" の部分です。 |
つぎの例では,右側の境界(border-right)の色は "blue" になります。 なぜなら,4行目にある borderプロパティ の指定では,色は "red" ですが, 次の行にある border-right プロパティ では,色が指定されていません。 その結果,色の値はリセットされて color プロパティ の値とされます。 color プロパティによる色の指定はそれより後にありますが,この border-right プロパティ と color プロパティ の順序は結果には影響しません。 なお,左側の境界部分では,太さも初期値にリセットされています。
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.sample3 { width:320px; height:60px; border: solid red 6px; border-right: double; color: blue; } --> </style> |
HTML <body> ~ </body> |
<div class="sample3">
これが class="sample3" の部分です。
</div> |
ブラウザー 表示例 |
---|
これが class="sample3" の部分です。 |