border-color
border-colorはボーダーの色を指定するためのプロパティです。
値には色に関する指定が可能です。
.target{
border-color:red;
}値がひとつの場合は上下左右に対して、値が2つの場合は上下、左右に対して、値が3つの場合は値が上、左右、下に対して、値が4つの場合は上、右、下、左に対して指定がされます。
下記のように指定した場合は、上辺が赤、左右辺が青、下辺が緑になります。
.target{
border-color:red blue green;
}個別に指定する場合、上辺の色を指定したい場合はborder-top-color、 右辺の色を指定したい場合はborder-right-color、 下辺の色を指定したい場合はborder-bottom-color、左辺の色を指定したい場合はborder-left-colorなどのプロパティで適応させることができます。
また、border-colorプロパティの指定が省略された場合は、colorプロパティの値が継承されてボーダー色として採用されます。
参考URL
4.1. Line Colors: the ‘border-color’ properties - W3C
登録日 : 2014年01月20日 最終更新日 : 2014年8月5日
同じカテゴリー(Border)のエントリー
- border
- border-left
- border-bottom
- border-right
- border-top
- border-image
- border-image-repeat
- border-image-outset
- border-image-width
- border-image-slice
- border-image-source
- border-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border-top-right-radius
- border-top-left-radius
- border-left-width
- border-bottom-width
- border-right-width
- border-top-width
- border-width
- border-left-style
- border-bottom-style
- border-right-style
- border-top-style
- border-style
- border-left-color
- border-bottom-color
- border-right-color
- border-top-color
- border-color