Putting Style Sheets in Perspective border-color

Initial Value: taken from color property of element Allowed Values: color {1,4} transparent inherit Applies to: all elements Inherited?: no

Borders are not limited to basic black. The border-color property may be set to any color, but keep in mind that not everyone has state of the art equipment. Stick to the 256 "safe" colors or you risk some of your visitors seeing odd colors.

Border-color may be specified for all fours sides at once or for each side individually. When just two values are specified, the first value will be applied to the top and bottom while the second value will be applied to the left and right sides. If three values are specified, the first value is applied to the top, the second value is applied to the left and right sides and the third value is applied to the bottom.

Note: Just specifying the border-color in your style sheet won't do. You need to also specify the border-style and border-width for the color to show. The border-style, on the other hand may be specified without a border-color. In such cases, the border will assume the color of the element.

 	{ border-style	: solid;
	border-width	: thin;
	border-color	: blue; }

	{ border-style	: solid;
	border-width	: thin;
	border-color	: blue red;}

	{ border-style	: solid;
	border-width	: thin;
	border-color	: blue red green;}

	{border-style	: solid;
	border-width	: thin;	
	border-color	: blue red green black;}

Additional Resources:

• W3C: 8.5.2 Border color
• Project Cool: Dynamic HTML Developer Zone
• Knoblock's Style Cookbook: Adding Borders Effectively

Putting Style Sheets in Perspective: padding
Putting Style Sheets in Perspective: Marginally Speaking
Putting Style Sheets in Perspective: border-style