The CSS 3 ‘Border Colors’ Rule

Posted on November 1, 2010

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

4	5	3	3.6	10	10.5	4	7	8	9

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.

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.

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

• A Regra ‘Border Colors’ em CSS 3 (Versão PT)

This entry was posted in CSS and tagged css3, web design. Bookmark the permalink.