Webデザイナーブログから学ぶホームページ制作

「border-left」プロパティは、左側のボーダー（境界線）の太さ・スタイル・色を指定するCSSプロパティです。

左側のボーダー（境界線）の太さ・スタイル・色を指定する値は「境界線の太さ」「境界線のスタイル」「境界線の色」などの値を指定することができます。
左側のボーダー（境界線）の太さを指定する値は「px」「em」などの値を指定、ボーダー（境界線）のスタイルを指定する値は「none」「hidden」「solid」「double」「groove」などの値を指定、ボーダー（境界線）の色を指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。 また、「border-left」プロパティと同時に設定が出来るプロパティの種類がいくつかあります。

【プロパティの種類】
・border-width
・border-color
・border-style

左側のボーダー（境界線）の太さ・スタイル・色を指定する場合は、「border-left」プロパティを使い適応する値を指定することで実装できます。

セレクタ{
border-left:左側のボーダー（境界線）の太さ・スタイル・色;
}

/* px値 */
border-left: 1px #ff0000 solid;
border-left: 5px #ff0000 solid;
border-left: 10px #ff0000 solid;

/* em値 */
border-left: 1em #ff0000 solid;
border-left: 5em #ff0000 solid;
border-left: 10em #ff0000 solid;

/* 基本値 */
border-left: none;/* 初期値 */
border-left: 1px #ff0000 hidden;/* ボーダーは表示されず、太さも0表示 */
border-left: 1px #ff0000 solid;/* 1本線で表示 */
border-left: 1px #ff0000 double;/* 2本線で表示 */
border-left: 1px #ff0000 groove;/* 立体的に窪んだ線で表示 */
border-left: 1px #ff0000 ridge;/* 立体的に隆起した線で表示 */
border-left: 1px #ff0000 inset;/* 上と左のボーダーが暗く、下と右のボーダーが明るく表示 */
border-left: 1px #ff0000 outset;/* 上と左のボーダーが明るく、下と右のボーダーが暗く表示 */
border-left: 1px #ff0000 dashed;/* 破線表示 */
border-left: 1px #ff0000 dotted;/* 点線表示 */

/* カラー名値 */
border-left: 1px red solid;/* 赤 */
border-left: 1px orange solid;/* オレンジ */
border-left: 1px black solid;/* 黒 */

/* 16進数カラー値 */
border-left: 1px #FF0000 solid;/* 赤 */
border-left: 1px #ff7200 solid;/* オレンジ */
border-left: 1px #000000 solid;/* 黒 */

/* rgb値 */
border-left: 1px rgb(34, 12, 64) solid;/* 赤 */
border-left: 1px rgb(255, 114, 64) solid;/* オレンジ */
border-left: 1px rgb(0, 0, 0) solid;/* 黒 */

/* hsl値 */
border-left: 1px hsl(30, 100%, 50%) solid;/* 赤 */
border-left: 1px hsl(30, 100%, 50%) solid;/* オレンジ */
border-left: 1px hsl(0, 0%, 0%) solid;/* 黒 */

/* 基本値 */
border-left: 1px solid red;
border-left: 2px double #000000;
border-left: 5px dashed rgb(255, 114, 64);