border-color:***; border-***-color:***;
border-colorは上下左右の境界線の色を指定するプロパティです。
境界線の色は16進法で指定をします。
▼CSS
div{
border-color:#ff0000 #0000ff #ff0000 #0000ff;
}
▼HTML
<div>
境界線の色が上辺が赤、右辺が青、下辺が赤、左辺が青で設定されています。
</div>
▼表示
境界線の色が上辺が赤、右辺が青、下辺が赤、左辺が青で設定されています。
値の書き方には何種類かあります。
上下左右個別に設定 | 上、右、下、左の順に値を設定 | border-color:#ff0000 #0000ff #ff0000 #0000ff; |
---|---|---|
上下と左右それぞれに設定 | 上下、左右の順に値を設定 | border-color:#ff0000 #0000ff; |
全て同じ色を設定 | 上下左右の値を設定 | border-color:#ff0000; |
どれか一辺を個別に設定したい場合は、下記のように記述することもできます。
上辺だけ設定 | border-top-color: #ff0000; |
---|---|
右辺だけ設定 | border-right-color: #ff0000; |
下辺だけ設定 | border-bottom-color: #ff0000; |
左辺だけ設定 | border-left-color: #ff0000; |