border-left-width

CSSでは、ボックス左の枠線で太さを変えることができます。

本ページでは、border-left-widthプロパティについて説明します。

border-left-widthプロパティとは

border-left-widthプロパティを使うと、ボックス左側の枠線(境界線)で太さを変えることができます。

border-left-widthの説明

border-left-widthの定義は、以下のとおりです。

【border-left-widthの定義】
length | thin | medium | thick
初期値 medium
適用対象 すべての要素
継承 しない

値の説明

以下は、border-left-widthで使える値と説明です。

length
数値と単位で指定します。マイナスは使えません。
thin
細い境界線です。
hidden
中太の境界線です。
thick
太い境界線です。

thin、medium、thichの太さは明確に決められていませんが、フォントサイズのmediumが17px以下の場合は、指標として以下が示されています。

【指標値】
キーワード 指標値
thin 1px
medium 3px
thick 5px

デフォルトがmediumのため、border-left-widthを指定しない時は3pxになることが多いと思います。

利用例

border-left-widthの利用例は、以下のとおりです。

【border-left-widthの利用例】
.test {
  border-left-style: solid;
  border-left-width: 2px;
}

border-left-widthだけでは、境界線は表示されません。上記のように、border-left-styleなどで境界線を表示する指定が必要です。

上記は、以下のように表示されます。

border-left-widthを利用した時の表示例

段落の左側に、境界線が2pxの太さで表示されています。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
border-left-width
【スマートフォン】
項目 Sa An Op Ch Fx Sm
border-left-width
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る