Title

border-bottom-widthとは

ここで説明するborder-bottom-width とは次の語句からなるCSSのプロパティです。

border

読み: ボーダー
意味: 領域、縁、端、境界

bottom

読み: ボトム
意味: 下、底

width

読み: ウィズ
意味: 幅

目次に戻る

border-bottom-widthプロパティの概要

このプロパティは要素の下辺の境界線の幅を設定することができます。

境界線の幅は次の一括指定プロパティを使うこともできまが、 この個別プロパティを使うことでコードがシンプルになることも考えられます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{border-bottom-width: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルにはdiv要素を使用しています。 境界線は「線の種類」であるborder-styleの初期値がnoneになっており、 このままでは境界線は表示されませんので、予め以下のプロパティを設定して表示されるようにしています。

• border-style: solid;
• border-color: currentColor

目次に戻る

初期値: medium

初期値のmediumは中くらいの太さの線です。

div{border-bottom-width: medium;}

目次に戻る

キーワード値: thin

thinキーワードは「細い、薄い」という意味で、細い線で表示されます。

div{border-bottom-width: thin;}

目次に戻る

キーワード値: thick

thickキーワードは「太い、厚い」という意味で、太い線で表示されます。

div{border-bottom-width: thick;}

目次に戻る

数値で太さを指定をする

数値による太さの指定は数値と単位をセットで記述します。 このサンプルでは単位をpxで指定しています。

詳しい単位については、 CSSの単位についてを参考にしてください。

div{border-bottom-width:10px;}

目次に戻る

グローバル値

border-bottom-widthプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のmediumに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{border-bottom-width: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border-bottom-width: medium;

border-bottom-width: thin;

border-bottom-width: thick;

border-bottom-width:10px;

目次に戻る