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

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

値の指定方法は数値、またはキーワードで指定できますが、負の値を指定することはできません。 また上下左右のボーダーを一括で指定したい場合はborder-widthを使用します。

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

書式

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

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

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

使用した時の例

p {border-style:solid;}
   
.sample1 {border-left-width:10px;}
.sample2 {border-left-width:thin;}
.sample3 {border-left-width:medium;}
.sample4 {border-left-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~

関連情報