The CSS 3 ‘Border Colors’ Rule

Posted on

CSS 3 Border Colors

CSS 3 is the latest CSS version and it brought us, web developers, lots of cool features. Unfortunately some browsers still do not interpret it fully and some other (Internet Explorer, of course) not even a bit.

However, CSS 3 is not only the future but a big part of the present. That is why I am going to explore a new great CSS 3 rule – Border Colors (note the ‘s’ on ‘colors’).

The CSS 3 Border Colors rule allows us to define more than one color to the borders of an object. It is possible to have as many colors as pixels in the border width. This means that, if we have a 3 pixels border, we can have 3 colors for that border. If, by any chance, we define only two colors, the last color will be present in the remaining pixels of the border.

Compatibility Table

Google Chrome logo Mozilla Firefox logo Opera logo Safari logo Internet Explorer logo
4 5 3 3.6 10 10.5 4 7 8 9
Not compatible Not compatible Compatible Compatible Not compatible Not compatible Not compatible Not compatible Not compatible Not compatible

Usage

1
2
3
4
5
6
7
div {
	border: 6px solid #ccc;
	-moz-border-bottom-colors: #aaa #bbb #ccc #ddd;
	-moz-border-top-colors: #aaa #bbb #ccc #ddd;
	-moz-border-left-colors: #aaa #bbb #ccc #ddd;
	-moz-border-right-colors: #aaa #bbb #ccc #ddd;
}

Example

This is what the code above does.

CSS3 Border Colors

This is a zoomed corner of the example above. Notice that the color #ddd is present in 3 pixels because we defined 4 colors instead of 6.

CSS3 Border Colors Zoomed

Don’t forget to check out these other ‘CSS 3 Rules’ posts:

  1. The CSS 3 ‘Border Colors’ Rule
  2. The CSS 3 ‘Border Image’ Rule
  3. The CSS 3 ‘Border Radius’ Rule

5 Responses to The CSS 3 ‘Border Colors’ Rule

  1. Pingback: Tweets that mention The CSS 3 ‘Border Colors’ Rule | Alexandre Figueiredo -- Topsy.com

  2. Pingback: The CSS 3 ‘Border Image’ Rule | Alexandre Figueiredo

  3. Pingback: A Regra ‘Border Colors’ em CSS 3 | Alexandre Figueiredo

  4. Pingback: The CSS 3 ‘Border Radius’ Rule | Alexandre Figueiredo

  5. Marina says:

    You have really interesting blog, keep up posting such informative posts!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>