CSSボーダーカラー
CSSボーダーカラー
このborder-color
プロパティは、4つの境界線の色を設定するために使用されます。
色は次の方法で設定できます。
- name-「red」などの色の名前を指定します
- HEX-「#ff0000」のようなHEX値を指定します
- RGB-「rgb(255,0,0)」のようにRGB値を指定します
- HSL-「hsl(0、100%、50%)」のようにHSL値を指定します
- トランスペアレント
注:が設定されていない場合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;
}
結果:
Red border
Green border
Blue border
特定のサイドカラー
プロパティには、border-color
1〜4つの値を指定できます(上部の境界線、右側の境界線、下部の境界線、および左側の境界線)。
例
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
HEX値
境界線の色は、16進値(HEX)を使用して指定することもできます。
例
p.one {
border-style: solid;
border-color: #ff0000; /* red
*/
}
RGB値
またはRGB値を使用して:
例
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* red */
}
HSL値
HSL値を使用することもできます。
例
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%);
/* red */
}
HEX、RGB、およびHSL値の詳細については、CSSカラーの章を参照してください。