CSSの枠線の色

CSSの境界線の幅 CSS 枠線スタイル

CSS 境界線の色

border-color 属性は、4 つの境界線の色を設定するために使用されます。

色は次の方法で設定できます:

  • name - 「red」などの色の名前を指定します。
  • HEX - 「#ff0000」などの 16 進数値を指定します
  • RGB - 「rgb(255,0,0)」などの RGB 値を指定します。
  • HSL - HSL 値を指定します（例：「hsl(0, 100%, 50%)」）
  • 透明

注: border-color が設定されていない場合は、要素の色が継承されます。

例

さまざまな境界線の色のデモ:

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

結果:

赤い実線の境界線

緑色の実線の境界線

青い点線の境界線

自分で試してみてください

特定の境界線の色

border-color 属性には、1 ～ 4 つの値 (上、右、下、左の境界線) を指定できます。

例

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上が赤、右が緑、下が青、左が黄色 */
}

自分で試してみてください

16 進数の値

境界線の色は、16 進数値 (HEX) を使用して指定することもできます。

例

p.one {
  border-style: solid;
  border-color: #ff0000; /* 赤 */
}

自分で試してみてください

RGB 値

または RGB 値を使用します:

例

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* 赤 */
}

自分で試してみてください

HSL 値

HSL 値を使用することもできます。

例

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* 赤 */
}

自分で試してみてください

HEX、RGB、HSL 値の詳細については、「CSS カラー」の章をご覧ください。

CSSの境界線の幅 CSS 枠線スタイル