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