CSS3 Properties

BORDER COLORS

-moz-border-top-colors, -moz-border-bottom-colors, -moz-border-left-colors, -moz-border-right-colors

One feature in CSS3 is the ability to assign colors to borders. We already had that in the past, but the new part is the ability to assign colors per border pixel width. So, if you have a border that is 5 pixels in width, you can define 5 different colors for each “layer” of border.

To do that we use the following property -moz-border-top-colors: value; Using this property we can then define the color for each pixel on the top border, the bottom border, the left border, and the right border. ame for bottom, left and right one. The value is defined in pixels.

Support: This feature is only supported by Firefox at this point

EXAMPLE

<html>
<head>

<style type="text/css">
div {
	width:550px;
	height:80px;
	padding:10px;
}
.border-style{
	border: 14px solid #000;
	-moz-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;
	-moz-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;
	-moz-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;
	-moz-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;
}
</style>
</head>
<body>
	<div class="border-style"></div><br /><br />
</body>
</html>