border-left

CSSでは、ボックス左に枠線を表示して、色や太さを指定することができます。

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

border-leftプロパティとは

border-leftプロパティを使うと、ボックス左側の枠線(境界線)を表示して、色や太さを指定することができます。

border-leftの説明

border-leftは、border-left-widthと、border-left-styleborder-left-colorを一括して設定できます。

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

【border-leftの定義】
line-width || line-style || CSSで指定できる色
初期値 medium none colorプロパティの値
適用対象 すべての要素
継承 しない

値の説明

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

line-width
境界線の太さです。使える値は、border-left-widthと同じです。
line-style
境界線の種類です。使える値は、border-left-styleと同じです。
CSSで指定できる色
境界線の色です。使える値は、border-left-colorと同じです。

これらの値は、3つとも必須という訳ではなく、1つや2つだけ指定することも可能です。指定する順序も決まっていません。

省略した値は、初期値が使われます。

利用例

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

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

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

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

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

以下は、2つだけ指定した例です。

【border-leftで2つだけ指定した例】
.test {
  border-left: dotted red;
}

上記であれば、境界線はデフォルトのmedium(普通は3px)の太さで、点線の赤色で表示されます。

ブラウザのサポート状況

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

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

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

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