How do you create coloured borders with CSS3? With the new border-color tags of course! The border-color tag permits a web designer to be very specific about the colours used in the border of an HTML element.

As the W3C inches their way towards delivering on the promise of CSS3, many more browsers are beginning to support the new, cool features, either using standard tags, or through browser specific tags that will become standard once the particular module of CSS3 reaches final status.

CSS border-color Style Definition

The border-color tag enables you to create multi-coloured borders allowing for some very easy to make effects.

The tags to use are:

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];

Where <colour #1> is the first colour, on the outside of the border you wish to use, and [colour #N] specifies further colours to use, for however many border colours you need.

If you have a border that is N pixels wide, for example 8 pixels, you can specify 8 colours for each edge of the border.

If your border is narrower than the number of colours specified, e.g. you specify that your border is only 2 pixels wide, but you specify five colours, only the first two colours specified will be used. Conversely, if your border is wider than the number of colours given, that is, the border is five pixels wide but you only specify two colours, the last colour in the list of colours will be repeated across the remainder of the border.

Currently you have to use browser specific tags, e.g. –moz or –webkit, as the specification as of this writing is still in draft status. As of this writing only Firefox supports the border-color tag, with announced support by other browsers in the future.

For Firefox, you would use:

-moz-border-top-colors: yellow red blue pink white green;

Or alternatively, if you want to specify the exact colour codes to use:

-moz-border-top-colors: #ff0 #f00 #00f #f0f #fff #0f0;

Colouring The Individual Border Edges Of An Element

This example demonstrates how to specify the individual colours of each edge of a paragraph element’s border.

The Steps

1. Define two CSS style blocks
   1. Each border will be 8 pixels wide, solid, with a default colour of black.
   2. The edges of each border will fade from one colour to another.
2. Display two paragraphs with different border styles.
   1. Output a paragraph, the border edge fading dark grey through light grey.
   2. Output a paragraph, the border edge fading red through green .

The Source Code

.css3_example_border_colour_1
{
  border: 8px solid #000;
  padding: 5px 15px;

  -moz-border-top-colors: #f10 #d30 #b50 #970 #790 #5b0 #3d0 #1f0;
  -moz-border-bottom-colors: #f10 #d30 #b50 #970 #790 #5b0 #3d0 #1f0;
  -moz-border-left-colors: #f10 #d30 #b50 #970 #790 #5b0 #3d0 #1f0;
  -moz-border-right-colors: #f10 #d30 #b50 #970 #790 #5b0 #3d0 #1f0;
}

.css3_example_border_colour_2
{
  border: 8px solid #000;
  padding: 5px 15px;
  -moz-border-top-colors: #474747 #585858 #696969 #7a7a7a #8b8b8b #9c9c9c #adadad #bebebe;
  -moz-border-bottom-colors: #474747 #585858 #696969 #7a7a7a #8b8b8b #9c9c9c #adadad #bebebe;
  -moz-border-left-colors: #474747 #585858 #696969 #7a7a7a #8b8b8b #9c9c9c #adadad #bebebe;
  -moz-border-right-colors: #474747 #585858 #696969 #7a7a7a #8b8b8b #9c9c9c #adadad #bebebe;
}

<p class="css3_example_border_colour_1">Browsers supporting CSS3 will see a surrounding box that fades from dark grey to light grey.</p>

<p class="css3_example_border_colour_2">Browsers supporting CSS3 will see a surrounding box that fades from red to green.</p>

Program Output

Browsers supporting CSS3 will see a surrounding box that fades from dark grey to light grey.

Browsers supporting CSS3 will see a surrounding box that fades from red to green.

Results

The output shows two paragraphs with coloured borders around each <p> element. The first fading from dark grey to light grey, the second fading from bright red to bright green.

If you happen to be on a browser that does not yet support the border-colors tag, all you will see is regular unadorned text. Below is how the border-<direction>-colors tags look when rendered in Firefox 3.6.4.

Summary

The beauty of the new border-colors tags is that you can of course specify different colours for each edge of the border. I didn’t show it in my examples but I could as easily have made a border with different colours on each edge simply by altering the colours specified in the stylesheet.

The power to control not just border colours but the exact colours used on each edge is a pretty neat feature permitting some very cool visual effects that no longer require hacks to make happen. The second example I showed above will no doubt appear on the equivalent of MySpace and GeoCities pages everywhere within the next decade.

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