The ability to set a different colour on each edge of the border around an element is coming. No more slicing up GIFs or PNGs , no more layering of DIV sections!

Setting border edge colours in CSS3 is still not widely supported (as of this writing only Firefox supports it) but by the next release of your browser it should be available.

CSS3 border-color Style Definition

The edge colour of each border is set with the border-<direction>-color style tag, where direction indicates either top, bottom, left or right, for example:

border-top-colors: <colour #1> [colour #N];
border-bottom-colors: <colour #1> [colour #N];
border-left-colors: <colour #1> [colour #N];
border-right-colors: <colour #1> [colour #N];

You can have as many colours per edge as your border is wide, so if you have a border that is five pixels wide, you can specify up to five individual colours to use on that edge.

<colour #1> specifies the first colour on the outermost edge of the border, and then further colours specified by the repeating and optional [colour #N] change the colour of the edge as they move progressively inwards.

Specifying more colours than there are pixels in the width of the border will cause on the first N colours to be used and the extra colours to be ignored, e.g. if you specify ten colours per edge but only have a border than is five pixels thick, the last five colours in the list will be ignored.

Specifying fewer colours than the thickness of your border in pixels will make the last colour listed repeat across the remaining pixels, e.g. if you give only three colours, for example, red, green and blue, but your border is five pixels thick, the last colour, that is, green, will be repeated across the third, fourth, and fifth pixels of the border.

Because of the lack of support for this feature at this time — the CSS3 specification for this feature is still in draft — you need to use browser specific tags, .e.g. –moz for Firefox and Mozilla or –khtml for Konqueror-derived browsers.

The Firefox specific tags are:

-moz-border-left-colors: red;

Or if you want to use the exact hexadecimal colour codes instead:

-moz-border-left-colors: #F00;

How To Set The Colour On Each Edge

This example demonstrates the ability to change the colours of each edge of an element’s border.

The Steps

1. Declare two CSS styles
   1. Set up the non-supported browser version of the border to be a solid 1 pixel wide black line
   2. In the first style, declare each edge of the border to be a different colour using standard colour names.
   3. In the second style, declare each edge of the border to be a different colour using standard RGB colour codes.
2. Output two short pieces of text with garish borders utilising each style respectively.

The Source Code

.css3_example_border_colour_3
{
	padding: 5px 15px;
	border: 1px solid #000;
	
	-moz-border-top-colors: yellow;
	-moz-border-bottom-colors: red;
	-moz-border-left-colors: green;
	-moz-border-right-colors: blue;
}

.css3_example_border_colour_4
{
	padding: 5px 15px;
	border: 1px solid #000;
	
	-moz-border-top-colors: #CCC;
	-moz-border-bottom-colors: #363636;
	-moz-border-left-colors: #777;
	-moz-border-right-colors: #777;
}

<p class="css3_example_border_colour_3">Browsers with support for the new CSS3 border-color tags will see a surrounding box with bright colours.</p>

<p class="css3_example_border_colour_4">Browsers with support for the new CSS3 border-color tags will see a surrounding box with shades of grey.</p>

Program Output

Browsers with support for the new CSS3 border-color tags will see a surrounding box with bright colours.

Browsers with support for the new CSS3 border-color tags will see a surrounding box with shades of grey.

Results

The output demonstrates that you can set the individual colours of each edge of the border around an element, in this case a simple <p> paragraph element tag.

Reading this page on a browser that doesn’t support the new CSS3 border-color styling correctly? This is what it looks like.

Summary

My rather garishly coloured example illustrates the ability to set the edge colour of a border using the new CSS3 border-color style tags. You should of course choose more appropriate colours that fit with your particular web page design. Unless you have a webpage on MySpace, in which case, knock yourself out.

Subscribe to the RSS feed or follow me on Twitter to stay up to date!