border-bottom：要素の底辺に境界線を引くための値を一括で指定する

border-bottomプロパティの説明

border-bottomは、要素の底辺に表示する境界線の色、種類、太さを一括で指定するショートハンド・プロパティです。borderで指定できる四辺の枠線のうち、下側の辺を個別に装飾したい場合に有効です。

border-bottomで指定できる値は、border-bottom-color、border-bottom-style、border-bottom-widthです。一括で指定する場合は、省略した値が初期値として扱われます。特に、border-bottom-styleの初期値はnoneであるため、省略すると表示されない点に注意して下さい。

このプロパティによる一括指定は、要素の下辺を対象としています。他の辺の外枠を個別に指定する場合は、以下のいずれかのプロパティを使用して下さい。

• border-top：要素の上辺に境界線を引く
• border-right：要素の右辺に境界線を引く
• border-bottom：要素の下辺に境界線を引く
• border-left：要素の左辺に境界線を引く

border-bottomに指定できる値

<color>

CSSで使用できるデータ型の色の指定値です。キーワード、16進数、RGB値、HSL値などが使えます。初期値はcurrentcolorです。詳細はborder-colorを参照して下さい。

<line-style>

境界線をどのようなスタイルで装飾するのか、キーワードで種類を指定します。この値を省略すると、border-styleの初期値がnoneであるため、境界線は表示されません。

<line-width>

境界線の太さを指定します。キーワードやCSSで使用できる単位つきの数値を与えます。初期値はmediumです。詳細はborder-widthを参照して下さい。

border-bottomの使い方とサンプル

border-bottomプロパティの構文は以下の通りです。

/* スタイル */
border-bottom: solid;
border-bottom: dotted;
border-bottom: dashed;

/* 太さ スタイル */
border-bottom: 1px solid;
border-bottom: 3px inset;
border-bottom: 10px ridge;

/* スタイル 色 */
border-bottom: double gray;
border-bottom: groove #09f;
border-bottom: solid rgba(0, 0, 0, .5);

/* 太さ スタイル 色 */
border-bottom: 1px solid #333;
border-bottom: medium dashed green;
border-bottom: 1rem dotted rgba(153, 5, 35, 25%);

/* グローバル値 */
border-bottom: inherit;
border-bottom: initial;
border-bottom: revert;
border-bottom: unset;

border-bottomの実例

それでは簡単な例を見てみましょう。ここでは、いくつかの要素にborder-bottomを指定し、値を変更したものを並べて比較します。

.samp_box {
	padding: 0 1rem;
	text-align: center;
}
.samp_box > div {
	margin: 1rem auto 0 auto;
	padding: 2rem 1rem;
	background-color: #eee;
}
#border_1 {
	border-bottom: 1px solid #666;
}
#border_2 {
	border-bottom: 2px dotted #06f;
}
#border_3 {
	border-bottom: .3rem dashed #333;
}
#border_4 {
	border-bottom: 10px double rgba(14, 129, 153, 50%);
}
#border_5 {
	border-bottom: thick ridge Green;
}

<section class="samp_box">
	<p>border-bottom</p>
	<div id="border_1">1px solid #666</div>
	<div id="border_2">2px dotted #06f</div>
	<div id="border_3">.3rem dashed #333</div>
	<div id="border_4">10px double rgba(14, 129, 153, 50%)</div>
	<div id="border_5">thick ridge Green</div>
</section>