| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {border-right-style: 値 } |
| 値 の形式 | none，hidden，solid，dashed，dotted，double，groove，ridge，inset，outset |
| 初 期 値 | none |
| 対応ブラウザー | C1+ / e5.5+ / N6+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
border-right-styleプロパティ は，要素の 境界ボックス右部分の線のスタイル を指定します。
なお，border-rightプロパティによって， border-right-style，border-right-color，border-right-width の３つのプロパティを 一括指定できます。
値を指定する際には，次のようなキーワードが使用可能です。
| 値 | 説 明 |
|---|---|
| none | 境界なしにします。 ただし，表のセルなどで隣接要素と指定が競合した場合は，他の要素の指定が優先されます。 |
| hidden | 境界を非表示にします。 ただし，表のセルなどで隣接要素と指定が競合した場合は，この要素の指定が優先されます。 |
| solid | 実線を表示します。 |
| dashed | 破線を表示します。 |
| dotted | 点線を表示します。 |
| double | ２重線を表示します。 |
| groove | 境界部分が溝のように立体的にへこんで見える線を表示します。 |
| ridge | 境界部分が隆起して立体的に飛び出して見える線を表示します。 |
| inset | 境界に囲まれた内部が立体的にへこんで見える線を表示します。 |
| outset | 境界に囲まれた内部が立体的に飛び出して見える線を表示します。 |
| 備 考 | dashed（破線） や dotted（点線） の場合，長さ や 間隔 を調整する方法は提供されていません。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
div.sample {width: 50%; }
p.style1 {border-right-style: none}
p.style2 {border-right-style: hidden}
p.style3 {border-right-style: solid}
p.style4 {border-right-style: dashed}
p.style5 {border-right-style: dotted}
p.style6 {border-right-style: double}
p.style7 {border-right-style: groove}
p.style8 {border-right-style: ridge}
p.style9 {border-right-style: inset}
p.style10 {border-right-style: outset}
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample"> <p class="style1">{border-right-style: none} の境界表示</p> <p class="style2">{border-right-style: hidden} の境界表示</p> <p class="style3">{border-right-style: solid} の境界表示</p> <p class="style4">{border-right-style: dashed} の境界表示</p> <p class="style5">{border-right-style: dotted} の境界表示</p> <p class="style6">{border-right-style: double} の境界表示</p> <p class="style7">{border-right-style: groove} の境界表示</p> <p class="style8">{border-right-style: ridge} の境界表示</p> <p class="style9">{border-right-style: inset} の境界表示</p> <p class="style10">{border-right-style: outset} の境界表示</p> </div> |
| ブラウザー 表示例 |
|---|
{border-right-style: none} の境界表示 {border-right-style: hidden} の境界表示 {border-right-style: solid} の境界表示 {border-right-style: dashed} の境界表示 {border-right-style: dotted} の境界表示 {border-right-style: double} の境界表示 {border-right-style: groove} の境界表示 {border-right-style: ridge} の境界表示 {border-right-style: inset} の境界表示 {border-right-style: outset} の境界表示 |
次の例では，クラス sample2 と sample3 では，スタイルの値を持たない border-right と border-right-style の ２つプロパティの指定の順序が違います。 このうち，sample3 では，右の境界線は表示されません。 それは，sample3 クラス では，後の border-right の値には， border-right-style が指定されていないため，初期値の none に リセットされてしまうからです。
一方，クラス sample4 のようなスタイル，色，幅の個別の指定の場合では，指定内容の範囲 が独立していますので，指定の順番を変更しても結果は変わりません。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
div.sample1 {
background-color: #CCCCCC;
border: solid red 6px;
border-right-color: green;
border-right-style: double;
}
div.sample2 {
background-color: #CCCCCC;
border-right: green 6px;
border-right-style: double;
}
div.sample3 {
background-color: #CCCCCC;
border-right-style: double;
border-right: green 6px;
}
div.sample4 {
background-color: #CCCCCC;
border-right-style: double;
border-right-color: green;
border-right-width: 6px;
}
-->
</style> |
| HTML <body> ～ </body> |
<div style="width:50%;"> <br> <div class="sample1">これが class="sample1" の部分です。</div> <br> <div class="sample2">これが class="sample2" の部分です。</div> <br> <div class="sample3">これが class="sample3" の部分です。</div> <br> <div class="sample4">これが class="sample4" の部分です。</div> <br> </div> |
| ブラウザー 表示例 |
|---|
これが class="sample1" の部分です。
これが class="sample2" の部分です。
これが class="sample3" の部分です。
これが class="sample4" の部分です。
|