Title

border-widthとは

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

border

読み: ボーダー
意味: 境界線

width

読み: ウィズ
意味: 幅

目次に戻る

border-widthプロパティの概要

このプロパティは要素の境界線の幅(太さ)を指定することができます。

四辺の境界線の幅を均一指定する他に、上下左右の各辺の幅を個別に設定する機能を有します。

目次に戻る

構文

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

セレクター{border-width: 四辺値}
セレクター{border-width: 上下辺値 左右辺値}
セレクター{border-width: 上辺値 左右辺値 下辺値}
セレクター{border-width: 上辺値 右辺値 下辺値 左辺値}

このborder-styleプロパティは次に挙げるプロパティの値を一括指定する機能を有します。

• border-top-width: 上辺の境界線の幅
• border-bottom-width: 下辺の境界線の幅
• border-left-width: 左辺の境界線の幅
• border-right-width: 右辺の境界線の幅

※ コードの指定辺の値の区切りには半角スペースを使います。

目次に戻る

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

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

サンプルに使用する要素はdiv要素です。 このborder-widthプロパティの効果を目視するためには次に挙げるプロパティのスタイル値がnone、またはhidden以外である必要があります。 スタイル値がnone、またはhiddenの場合、widthの各プロパティに対応する辺の幅の値は0として計算されるのでボーダーは表示されません。 ここでは、それを回避するために、全てのサンプルに対して border-style プロパティにsolidキーワードを設定しています。

• border-style: 四辺の境界線スタイル --- border-width: 四辺の境界線の幅
• border-top-style: 上辺の境界線スタイル --- border-top-width: 上辺の境界線の幅
• border-bottom-style: 下辺の境界線スタイル --- border-bottom-width: 下辺の境界線の幅
• border-left-style: 左辺の境界線スタイル --- border-left-width: 左辺の境界線の幅
• border-right-style: 右辺の境界線スタイル --- border-right-width: 右辺の境界線の幅

初期値: medium

初期値のmediumキーワードは、 いわゆる中くらいの幅の境界線を表示します。 幅の寸法はブラウザに依存します。

div{
	border-style: solid;
	border-width: medium;
}

目次に戻る

キーワード値: thin

thinキーワードは、 細い幅の境界線を表示します。 幅の寸法はブラウザに依存します。

div{
	border-style: solid;
	border-width: thin;
}

目次に戻る

キーワード値: thick

thickキーワードは、 太い幅の境界線を表示します。 幅の寸法はブラウザに依存します。

div{
	border-style: solid;
	border-width: thick;
}

目次に戻る

数値: 単位付き数値での幅の指定

境界線の幅は単位付きの数値で指定することができます。 ここではサンプルとして要素の1文字の高さと同等の境界線を指定しました。

単位付きの数値に関しては、 「CSSの単位について」 のページを参照してください。 なお、このプロパティにはパーセンテージ値は使用できません。

div{
	border-style: solid;
	border-width: 1em;
}

目次に戻る

応用: 四辺を別々の幅に指定する

要素の境界線の幅は上下左右の四辺を別々に指定することができます。 ここではサンプルとして四辺を別々に指定しています。

詳しくは、このページの構文を参考にしてください。

div{
	border-style: solid;
	border-width: 1px 5px 9px 13px;
}

目次に戻る

グローバル値

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

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

border-width: medium;

border-width: thin;

border-width: thick;

border-width: 5px;

border-width: 1px 5px 9px 13px;

目次に戻る