border-bottom:要素の底辺に表示するボーダー(枠線)の各値を設定する
取り扱い | 標準 |
適用可能 | 全ての要素 |
継承 | しない |
対応ブラウザ | border-bottomの対応状況を確認する |
border-bottomプロパティの説明
border-bottomは、要素の底辺に表示するボーダー(枠線)の太さ、スタイル、色を指定する際に使用します。指定する値は任意の順序でスペースで区切って記述します。上下左右のボーダー色をまとめて指定する場合には、borderを使います。
類似のプロパティには、border-top、border-right、border-leftがあります。必要に応じて使い分けてください。
border-bottomに与えられる値
ボーダーの太さ、スタイル、色に指定できる値は、それぞれのプロパティを参照してください。
border-width
border-style
border-color
border-bottomの使用サンプル
CSS
.box_sample { padding: 5px; margin: 0 0 10px 0; } .border_1 { border-top: 3px solid red; border-right: 3px solid blue; border-bottom: 3px solid green; border-left: 3px solid purple; } .border_2 { border-top: 3px dashed #FF0000; border-right: 3px dashed #000FF; border-bottom: 3px dashed #00CC33; border-left: 3px dashed #800080; } .border_3 { border-top: 3px dotted rgb(255,0,0); border-right: 3px dotted rgb(0,0,255); border-bottom: 3px dotted rgb(0,204,51); border-left: 3px dotted rgb(128,0,128); }
HTML
<div class="box_sample border_1"> border-top: 3px solid red; border-right: 3px solid blue; border-bottom: 3px solid green; border-left: 3px solid purple; </div> <div class="box_sample border_2"> border-top: 3px dashed #FF0000; border-right: 3px dashed #000FF; border-bottom: 3px dashed #00CC33; border-left: 3px dashed #800080; </div> <div class="box_sample border_3"> border-top: 3px dotted rgb(255,0,0); border-right: 3px dotted rgb(0,0,255); border-bottom: 3px dotted rgb(0,204,51); border-left: 3px dotted rgb(128,0,128); </div>
表示確認
border-top: 3px solid red;
border-right: 3px solid blue;
border-bottom: 3px solid green;
border-left: 3px solid purple;
border-right: 3px solid blue;
border-bottom: 3px solid green;
border-left: 3px solid purple;
border-top: 3px dashed #FF0000;
border-right: 3px dashed #0000FF;
border-bottom: 3px dashed #00CC33;
border-left: 3px dashed #800080;
border-right: 3px dashed #0000FF;
border-bottom: 3px dashed #00CC33;
border-left: 3px dashed #800080;
border-top: 3px dotted rgb(255,0,0);
border-right: 3px dotted rgb(0,0,255);
border-bottom: 3px dotted rgb(0,204,51);
border-left: 3px dotted rgb(128,0,128);
border-right: 3px dotted rgb(0,0,255);
border-bottom: 3px dotted rgb(0,204,51);
border-left: 3px dotted rgb(128,0,128);
border-bottomに関連するCSSプロパティ
外枠(ボーダー・アウトライン) | |
---|---|
border | 要素の周囲にボーダー(枠線)を付ける |
border-bottom | 要素の底辺にボーダー(枠線)を付ける |
border-bottom-color | 要素の底辺に設定したボーダー(枠線)の色を指定する |
border-bottom-left-radius | 要素の左下の角丸を指定する |
border-bottom-right-radius | 要素の右下の角丸を指定する |
border-bottom-style | 要素の底辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-bottom-width | 要素の底辺に設定したボーダー(枠線)の太さを指定する |
border-break | ボックスが分割された場合のボーダーの表示方法を指定する |
border-collapse | テーブルセルのボーダーの表示の仕方を指定する |
border-color | 要素のボーダー(枠線)の色を指定する |
border-image | 要素のボーダー(枠線)に画像を指定する |
border-image-outset | ボーダーイメージエリアを広げる |
border-image-repeat | ボーダー(枠線)に指定された画像の繰り返し方法を指定する |
border-image-slice | ボーダー(枠線)に指定された画像の使用範囲を指定する |
border-image-source | ボーダー(枠線)に使用する画像ファイルを指定する |
border-image-width | 画像ボーダーの太さを指定する |
border-left | 要素の左辺にボーダー(枠線)を付ける |
border-left-color | 要素の左辺に設定したボーダー(枠線)の色を指定する |
border-left-style | 要素の左辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-left-width | 要素の左辺に設定したボーダー(枠線)の太さを指定する |
border-length | 脚注の区切り線の長さを指定する |
border-radius | 要素の角丸についてまとめて指定する |
border-right | 要素の右辺にボーダー(枠線)を付ける |
border-right-color | 要素の右辺に設定したボーダー(枠線)の色を指定する |
border-right-style | 要素の右辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-right-width | 要素の右辺に設定したボーダー(枠線)の太さを指定する |
border-spacing | テーブルセルのボーダーの間隔を指定する |
border-style | ボーダー(枠線)の種類を指定する |
border-top | 要素の上辺にボーダー(枠線)を付ける |
border-top-color | 要素の上辺に設定したボーダー(枠線)の色を指定する |
border-top-left-radius | 要素の左上の角丸を指定する |
border-top-right-radius | 要素の右上の角丸を指定する |
border-top-style | 要素の上辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-top-width | 要素の上辺に設定したボーダー(枠線)の太さを指定する |
border-width | ボーダー(枠線)の太さを指定する |
outline | アウトラインの表示方法をまとめて指定する |
outline-color | アウトラインの色を指定する |
outline-offset | アウトラインのオフセット値を指定する |
outline-style | アウトラインのスタイルを指定する |
outline-width | アウトラインの太さを指定する |