CSS3 Border Color / Colour

css3 border color

Give your borders a more color / colour filled effect with CSS3 using the border-color property.

Using CSS3 border-color, if you have a standard border of X pixels, then you can use up to X colors on that border, each color registering 1 pixel in width. If say you are using a standard border of 10 pixels but only apply 5 or 6 colors, the last color will then be applied to the remaining standard border width.

Cross Brower Compatability
Currently FireFox is the only browser giving support to the CSS3 border-colour so we will only be dealing with the -moz prefix.
All articles in the CSS3 will be updated to show future support & development.

CSS3 Border Color

This is a panel set with a 10 pixel standard border and border-colors

  1. CSS3 Border Color (Standard Border)
  2. #my_CSS3_id {
  3.   border: 10px solid #c4c8cc;
  4.   -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
  5.   -moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
  6.   -moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
  7.   -moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
  8. }

An example for those on alternative browsers, not seeing the border-colour effect..

 

CSS3 Border Color (with rounded corners)

This is a panel set with a 10 pixel standard border, border-colors and a border-radius

  1. CSS3 Border Color (Rounded Corners)
  2. #my_CSS3_id {
  3.   border: 10px solid #c4c8cc;
  4.   -moz-border-radius: 15px;
  5.   -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;
  6.   -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A;
  7.   -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A;
  8.   -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;
  9. }

An example for those on alternative browsers, not seeing the border-colour effect..

 

The Zen Elements CSS3 Series

Thank you for reading!
Alex | @ZenElements

Like this article?

Subscribe to our rss, follow our tweets or please help us spread the work & share this with your friends!

Thank you for all your support; have a cookie!

One Comment on “CSS3 Border Color / Colour”

  1. ???bishua? 12.08.2010 at 7:27 am

    artical is very useful!

 

Leave a Reply

(required; who are you?)

(required; we'll keep it safe!)

(optional; promote your site!)