Atributo gradiente de colores en borde con CSS y Firefox

  • Por
  • CSS
Posibilidad de definir el un gradiente de color en el borde de los elementos con CSS, en un atributo no estándar de Firefox.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

deiviman

19/11/2012
bordes redondeados
buenas, soy novato con css, tengo puesto los boders redondeados con border-radius, pero el gradiente no me los colorea bien, saludos

luiscr269

12/2/2013
Pruebas con navegadores
He hecho pruebas y el gradiente solo me funciona en Firefox 18.0.2
He probado con Chrome 24.0 y Explorer 8.0 y no me funciona.
Lo he probado con 3 posibilidades:
border-color
-moz-border-color
-webkit-border-color

Saludos.

deivis

16/5/2014
border-colors
Que lastima que no sea un estandar seria grandioso que se pudiera ver en los distintos navegadores, espero que la w3c lo tome en cuenta y no lo pase por alto.

rafaelglez

01/9/2016
CCS3
Hola,soy nuevo trabajando con CCS3,me gustaria que me envien un manual a mi correo rgarciag@emprequin.co.cu.Gracias.