【border-bottom-width】下のボーダー(枠線)の太さを指定

border-bottom-widthプロパティでは、下のボーダー(枠線)の太さを個別に指定することができます。

数値でボーダーの太さを設定する場合は、負の値を指定する事はできませんので注意して下さい。 キーワードで指定する場合は、実際に表示される太さ(幅)はブラウザに依存します。

なおボーダーの種類の初期値は「none」となっています。 このためborder-bottom-widthで太さだけを指定しても、ボーダーは表示されません。 ボーダーを表示し、太さの設定を有効にするには、border-bottom-widthと併せてボーダーの種類(border-style)を指定し、「none」「hidden」以外の値を設定する必要があります。

ボーダーの太さを上下左右まとめて指定したい場合は、border-widthを使用して下さい。

書式

  • border-bottom-width : ……… 下のボーダー(枠線)の太さを個別指定

★:thin、medium、thick、実数値+単位、inherit

実数値+単位
数値にpxなどの単位をつけてボーダーの太さを指定します。負の値は指定できません。
thin
細い線で表示します。
medium
中くらいの線で表示します。
thick
太い線で表示します。

使用した時の例

p {border-style:solid;}
  
.sample1 {border-bottom-width:10px;}
.sample2 {border-bottom-width:thin;}
.sample3 {border-bottom-width:medium;}
.sample4 {border-bottom-width:thick;}
<p class="sample1">10px</p>
<p class="sample2">thin</p>
<p class="sample3">medium</p>
<p class="sample4">thick</p>

ブラウザ上の表示例

10px

thin

medium

thick

対応ブラウザなどのデータ

初期値 medium 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報