Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

トップページ
CSS辞典
border-left-width

border-left-width

左部の境界線の幅に関する項目を指定できます。

サンプルコード

style.css

/* thin キーワード（一般に1px相当） */
div.test { border-left-width: thin;}

/* medium キーワード（初期値、一般に3px相当） */
div.test1 { border-left-width: medium;}

/* thick キーワード（一般に5px相当） */
div.test2 { border-left-width: thick;}

/* pxで正確に指定 */
div.test3 { border-left-width: 10px;}

/* 0で非表示 */
div.test4 { border-left-width: 0;}

/* border-left-style も合わせて指定しないと表示されない */
.left-accent {
	border-left-style: solid;
	border-left-width: 6px;
	border-left-color: #ff6600;
	padding-left: 12px;
}

指定可能な値一覧

値	概要
数値	境界線の太さを『px』などで指定できます。
thin	『thin』(細い)というキーワードで指定します。一般的なブラウザでは1pxで表示されますがブラウザによって多少の差があります。
medium	『medium』(中間)というキーワードで指定します。一般的なブラウザでは3pxで表示されますがブラウザによって多少の差があります。『border-left-width』に関する値が指定されていない場合はこれが初期値となります。
thick	『thick』(厚い)というキーワードで指定します。一般的なブラウザでは5pxで表示されますがブラウザによって多少の差があります。

ブラウザでの表示結果

※ 以下のサンプルの『border-style』プロパティは『solid』を指定しています。

<div style="border-left-width: 10px; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 以降 ○

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

2.2 以降 ○

1 以前 ×

Chrome Android