CSS辞典 border-color、border-top-color、border-right-color、border-bottom-color、border-left-colorプロパティの解説
ボーダーの色をまとめて指定する「border-colorプロパティ」、上辺のボーダー色を指定する「border-top-colorプロパティ」、右辺のボーダー色を指定する「border-right-colorプロパティ」、下辺のボーダー色を指定する「border-bottom-colorプロパティ」、左辺のボーダー色を指定する「border-left-colorプロパティ」の使用方法を記載
対応バージョン：CSS3／2.1
目次
対応ブラウザ
| 初期値 | currentcolor |
| 適用される要素 | すべての要素 |
| モジュール | Backgrounds and Borders Module Level3 |
| 継承 | なし |
※border-color、border-top-color、border-right-color、border-left-color、border-bottom-colorすべて同様。
border-colorプロパティ
概要・使用方法
{ border-color: -top -right -bottom -left;}指定できる値はborder-widthのtop、right、bottom、leftのプロパティと同様です。それぞれ半角スペースで区切って指定します。４つまで指定できます、左から順に上辺、右辺、下辺、左辺の順に適用されます。省略した場合は次のようになります。
| 値が1つ | 上右下左にすべて同じ値を指定します。 |
| 値が2つ | １つ目が上下、２つ目の値が左右に適用されます。 |
| 値が３つ | １つ目が上、２つ目が左右、３目が下に適用されます。 |
指定可能な色
| 色 | キーワード、カラーコード、rgb()、rgba()、hsl()、hsla()によるHSLカラー等の色を指定できます。 |
詳しい色の指定は以下を参照
border-colorプロパティでもcolorプロパティと同様に、RGB値による指定のほか、HSL値にょる指定、及び透明度のアルファ値を加えたRGBA値またはHSLA値での指定を利用できます。また、キーワードとして、「transparent」と「currentColor」を指定できます。
border-top-colorプロパティ
上辺のボーダーの色を指定できます。
概要・使用方法
{ border-top-color: 色;}border-right-colorプロパティ
右辺のボーダーの色を指定できます。
概要・使用方法
{ border-right-color: 色;}border-bottom-colorプロパティ
下辺のボーダーの色を指定できます。
概要・使用方法
{ border-bottom-color: 色;}border-left-colorプロパティ
左辺のボーダーの色を指定できます。
概要・使用方法
{ border-left-color: 色;}サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>border-colorプロパティ CSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
.disp{display:inline-block;margin:0.5em;}
.box-style{
width: 20em;
height: 5em;
margin:0.5em;
background-color:lightsteelblue;
border-style:solid;
border-width:0.5em;
}
.style-top{
border-top-color:red;
}
.style-right{
border-right-color:red;
}
.style-bottom{
border-bottom-color:red;
}
.style-left{
border-left-color:red;
}
.style-border{
border-color:red purple lime yellow;
}
</style>
</head>
<body>
<div class="disp">
<div class="box-style style-top">top</div>
<div class="box-style style-right">right</div>
<div class="box-style style-bottom">bottom</div>
<div class="box-style style-left">left</div>
<div class="box-style style-border">border</div>
</div>
</body>
</html>top
right
bottom
left
border
chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
