border-left CSSプロパティを使うと、HTML要素の左側の境界線について、その太さ、スタイルおよび色を指定することができます。
border-left は、左の枠線の太さ、種類、色を指定するCSSプロパティである。枠線とは margin と padding の境界線のことです。
border-left: width style color;要素の幅を数値で指定する場合は、次の単位を利用できる。
| 単位 | 意味 | 説明 |
|---|---|---|
| em | フォントサイズ | |
| rem | root em | ドキュメントのルート要素のフォントサイズ |
| cm | centimeters | 1cm |
| mm | millimeters | 1mm |
| Q | 級 (quarter-millimeters) | 0.25mm |
| in | inches | 1 inch |
| pc | picas | 1/6 inch |
| pt | points | 1/72 inch |
| px | pixels | 1/96 inch |
| % | percent | パーセント |
| vw | viewport width | ビューポートの幅の1/100 |
| vmin | minimum viewport | ビューポートの幅または高さで小さい方の1/100 |
| vmax | maximum viewport | ビューポートの幅または高さで大きい方の1/100 |
<p style="border-left: 1px solid black;">solid</p>solid
<p style="border-left: 1px dashed black;">dashed</p>dashed
<p style="border-left: 1px dotted black;">dotted</p>dotted
<p style="border-left: thick double black;">double</p>double
<p style="border-left: thick groove silver;">groove</p>groove
<p style="border-left: thick ridge silver;">ridge</p>ridge
<p style="border-left: thick inset silver;">inset</p>inset
<p style="border-left: thick outset silver;">outset</p>outset
border-left-width は、左の境界線の太さを指定するCSSプロパティである。
border-left-width: width| 値 | 説明 |
|---|---|
| thin | 細い線 |
| medium | 通常の線（規定値） |
| thick | 太い線 |
要素の幅を数値で指定する場合は、次の単位を利用できる。
| 単位 | 意味 | 説明 |
|---|---|---|
| em | フォントサイズ | |
| rem | root em | ドキュメントのルート要素のフォントサイズ |
| cm | centimeters | 1cm |
| mm | millimeters | 1mm |
| Q | 級 (quarter-millimeters) | 0.25mm |
| in | inches | 1 inch |
| pc | picas | 1/6 inch |
| pt | points | 1/72 inch |
| px | pixels | 1/96 inch |
| % | percent | パーセント |
| vw | viewport width | ビューポートの幅の1/100 |
| vmin | minimum viewport | ビューポートの幅または高さで小さい方の1/100 |
| vmax | maximum viewport | ビューポートの幅または高さで大きい方の1/100 |
<blockquote style="border-left-width: solid; border-left-width: thin; padding: 1rem">
thin border
</blockquote>thin border
<blockquote style="border-left-width: solid; border-left-width: medium; padding: 1rem">
medium border
</blockquote>medium border
<blockquote style="border-left-width: solid; border-left-width: thick; padding: 1rem">
thick border
</blockquote>thick border
border-left-style は左の境界線の種類を指定するCSSプロパティである。
border-left-style: style| 値 | 説明 |
|---|---|
| none | 線無し（規定値） |
| solid | 実線 |
| dashed | 粗い点線 |
| dotted | 点線 |
| double | 二重線 |
| groove | 谷線 |
| ridge | 山線 |
| inset | 内線 |
| outset | 外線 |
| inherit | 継承 |
<blockquote style="border-left-style: solid; padding: 1rem">
solid border
</blockquote>solid border
<blockquote style="border-left-style: dashed; padding: 1rem">
dashed border
</blockquote>dashed border
<blockquote style="border-left-style: dotted; padding: 1rem">
dotted border
</blockquote>dotted border
<blockquote style="border-left-style: double; padding: 1rem">
double border
</blockquote>double border
border-left-color は、左の境界線の色を指定するCSSプロパティである。
border-left-color: color<blockquote style="border-left-style: solid; border-left-color: red; padding: 1rem">
red border
</blockquote>red border
<blockquote style="border-left-style: solid; border-left-color: green; padding: 1rem">
green border
</blockquote>green border
<blockquote style="border-left-style: solid; border-left-color: blue; padding: 1rem">
blue border
</blockquote>blue border
World Wide Web Consortium (2021) CSS Backgrounds and Borders Module Level 3
World Wide Web Consortium (2019) CSS Values and Units Module Level 3