border-bottom:要素の底辺に境界線を引くための値を一括で指定する
初期値 | 各プロパティの初期値 |
適用対象 | 全ての要素、::first-letter |
継承 | しない |
アニメーション | 各プロパティの値に基づく |
対応ブラウザ | caniuseで確認 |
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
プロパティの構文は以下の通りです。
CSS
/* スタイル */
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
を指定し、値を変更したものを並べて比較します。
表示確認
CSS
.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;
}
HTML
<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>
border-bottomに関連するCSSプロパティ
境界線・輪郭線 | |
---|---|
border | 要素の周囲に境界線を付ける |
border-bottom | 要素の底辺に境界線を付ける |
border-bottom-color | 要素の底辺に表示する境界線の色を指定する |
border-bottom-left-radius | 要素の左下の角丸を指定する |
border-bottom-right-radius | 要素の右下の角丸を指定する |
border-bottom-style | 要素の底辺に表示する境界線の形状を指定する |
border-bottom-width | 要素の底辺に表示する境界線の幅を指定する |
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-radius | 要素の角丸についてまとめて指定する |
border-right | 要素の右辺に境界線を付ける |
border-right-color | 要素の右辺に表示する境界線の色を指定する |
border-right-style | 要素の右辺に表示する境界線の形状を指定する |
border-right-width | 要素の右辺に表示する境界線の幅を指定する |
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 | アウトラインの太さを指定する |