| Definición | Establece el color del borde derecho de los elementos |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores: |
| Valor inicial | Color negro |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS21/box.html#propdef-border-right-color |
Ejemplos de uso
En primer lugar, la propiedad border-right-color permite establecer el color del borde derecho de un elemento mediante cualquiera de las diferentes formas de indicar un color en CSS:
Además de utilizar colores normales, también es posible establecer el borde de color transparente. Un borde transparente es muy diferente a no tener borde, ya que el borde transparente no se ve pero sí que ocupa sitio.
En el siguiente ejemplo, la primera caja tiene establecido un borde derecho transparente que, gracias a JavaScript, cambia de color cuando se pasa el ratón por encima de la caja. Como el borde transparente no se ve pero sí que ocupa sitio, al mostrar el nuevo borde la caja no se mueve, ya que el navegador había reservado el sitio necesario para el borde transparente.
Sin embargo, la segunda caja no tiene establecido ningún borde derecho y al pasar el ratón por encima suyo, gracias a JavaScript, se muestra un borde. En este caso, como antes no existía un borde y ahora sí, el navegador desplaza la caja ya que debe hacer sitio para mostrar el borde.
En el ejemplo anterior, las dos cajas parecen comportarse igual. El motivo es que a la derecha de las cajas no hay ningún otro elemento, por lo que no se puede apreciar el desplazamiento que se produce al pasar el ratón por encima de la segunda caja.