CSS

　The border-left-width property is a CSS property that specifies the thickness of the border on the left side of an HTML element.

border-left-width

　border-left-widthプロパティは、HTML要素の左側に表示されるボーダーの太さを指定するためのプロパティです。このプロパティは、CSSの borderプロパティの一部であり、border-left-widthは borderプロパティや border-widthプロパティの左側のボーダーの太さを指定します。上下左右のボーダーの太さをまとめて指定する際には、border-width を使用してください。

　border-left-widthプロパティは、次のように使用されます。

selector {
	border-left-width: value;
}

　selectorは、ボーダーの太さを設定する HTML要素を指定する CSSセレクターです。valueは、ボーダーの太さを指定する値で、単位として px、em、remなどが使用できます。

　例えば、以下のように、クラス名が border の要素の左側のボーダーの太さを 2px に設定する場合は、次のように記述します。

.border {
	border-left-width: 2px;
}

border-left-wifthプロパティの概要

書式

border-left-width: 値

適用対象

すべての要素

初期値

medium

値の継承

しない

指定できる値

実数 + 単位

実数に em、pt、px などの単位をつけて指定できます。マイナスの値と単位に % は指定できません。尚、pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。

thin, medium, thick

太さはキーワードで指定することもできます。thin は細いボーダー、medium は中位のボーダー、thick は太いボーダーに設定しますが、キーワードで指定する場合は、具体的な太さはブラウザによって異なります。

Sample

p {
	border-style: solid;
}
p.sample1 {
	border-left-width: 6px;
}
p.sample2 {
	border-left-width: 1em;
}
p.sample3 {
	border-left-width: thin;
}
p.sample4 {
	border-left-width: medium;
}
p.sample5 {
	border-left-width: thick;
}

<p class="sample1">左側のボーダーの太さに 6px を指定しています。</p>
<p class="sample2">左側のボーダーの太さに 1em を指定しています。</p>
<p class="sample3">左側のボーダーの太さに thin を指定しています。</p>
<p class="sample4">左側のボーダーの太さに medium を指定しています。【初期値】</p>
<p class="sample5">左側のボーダーの太さに thick を指定しています。</p>