Investigando un poco con algunas de las propiedades nuevas que va a traer CSS 3, para completar la información del artículo Introducción a CSS 3 , he dado con un atributo para cambiar el color del borde de los elementos de la página, que nos permite definir el color con una sucesión de distintos valores de colores. En la actualidad, con CSS podemos definir por separado los colores del borde de un elemento, de arriba, derecha, abajo e izquierda. Pero no nos referimos a poder dar un color por separado para cada parte del borde, sino aplicar varios colores distintos a una parte, por ejemplo a la parte de arriba del borde.

Esta propiedad la he visto comentada en algún lugar como de CSS 3, pero según veo en el borrador de la especificación de CSS 3 para bordes y fondos, publicado por el W3C, no aparece esta nueva característica como parte del nuevo estándar.

Por ello, habría que matizar que esta propiedad no es de CSS 3, sino que se trata de un atributo no estándar de CSS, creado por Mozilla y que, por tanto, se puede ver en su navegador más conocido: Firefox. Dicho de otra forma, es una extensión de CSS realizada por Mozilla. En la página de Mozilla podemos encontrar más información sobre esta extensión de CSS: https://developer.mozilla.org/en/CSS/-moz-border-bottom-colors

Los atributos a los que nos referimos, que permiten definir varios colores para cada una de las partes del borde, son los siguientes:

-moz-border-top-colors
-moz-border-right-colors
-moz-border-bottom-colors
-moz-border-left-colors

En cada uno de los atributos se define el color, pudiendo especificar una lista de colores, separados por espacios, que se aplicarán a cada una de las partes del borde, de dentro hacia fuera. Claro que el borde tiene que tener una anchura mayor que 1 para que se vean los distintos colores. Con una anchura de 2 pixel se podrán ver 2 colores distintos, con una anchura de 3 podremos definir 3 colores y así sucesivamente.

Para ver una de las posibilidades que daría el uso de este atributo podemos ver un ejemplo en una página aparte. (Pero tener en cuenta que sólo lo veréis correctamente en Firefox).

El código para crear ese gradiente de colores sería el siguiente:

<style type="text/css">
.coloresborde{
   border-style: solid;
   border-width: 10px;
   -moz-border-top-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
   -moz-border-right-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
   -moz-border-bottom-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
   -moz-border-left-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;
}
</style>

Es una pena que sea un atributo únicamente desarrollado por Mozilla, aunque si el soporte a estos atributos se lleva a cabo por más navegadores y la W3C lo tiene a bien, quizás en algún momento se convierta en un estándar de CSS.

Por el momento no vale para mucho más que una mera curiosidad y posibilidad de personalización especial para los usuarios de Firefox y otros navegadores basados en Mozilla.