CSS border-left

border-left CSSプロパティを使うと、HTML要素の左側の境界線について、その太さ、スタイルおよび色を指定することができます。

Figure 1. border, margin and padding

border-left

border-left は、左の枠線の太さ、種類、色を指定するCSSプロパティである。枠線とは marginpadding の境界線のことです。

書式

border-left: width style color;

属性

width
左の境界線の太さを指定する。指定形式はスタイルシート属性 borderwidth 属性値と同じです。

要素の幅を数値で指定する場合は、次の単位を利用できる。

単位
単位 意味 説明
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
style
左の境界線の種類を指定する。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
color
左の境界線の色を指定する。

種類

<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

border-left-width は、左の境界線の太さを指定するCSSプロパティである。

書式

border-left-width: 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

border-left-style は左の境界線の種類を指定するCSSプロパティである。

書式

border-left-style: 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

border-left-color は、左の境界線の色を指定するCSSプロパティである。

書式

border-left-color: 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