border-bottom：要素の底辺に表示するボーダー（枠線）の各値を設定する

border-bottomプロパティの説明

border-bottomは、要素の底辺に表示するボーダー（枠線）の太さ、スタイル、色を指定する際に使用します。指定する値は任意の順序でスペースで区切って記述します。上下左右のボーダー色をまとめて指定する場合には、borderを使います。

類似のプロパティには、border-top、border-right、border-leftがあります。必要に応じて使い分けてください。

border-bottomに与えられる値

ボーダーの太さ、スタイル、色に指定できる値は、それぞれのプロパティを参照してください。
border-width
border-style
border-color

border-bottomの使用サンプル

.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);
}

<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>