La Propiedad BORDER-INLINE-COLOR

La propiedad border-inline-color en CSS se utiliza para establecer el color de los bordes de un elemento que se encuentran en la dimensión en línea. Al igual que otras propiedades con el prefijo inline-, forma parte de las propiedades lógicas de CSS. Esto significa que los bordes afectados dependen del modo de escritura y la dirección del texto del elemento.

En la mayoría de los casos (modo de escritura horizontal de izquierda a derecha), la dimensión en línea corresponde a los bordes izquierdo y derecho. Sin embargo, en contextos con diferentes modos de escritura (como texto vertical) o direcciones (como derecha a izquierda), la dimensión en línea podría referirse a los bordes superior e inferior, o a la derecha e izquierda en un orden diferente.

Sintaxis Básica

La sintaxis básica para usar la propiedad border-inline-color es la siguiente:

selector {
  border-inline-color: <color>;
}

Donde <color> es el color que deseas aplicar a los bordes en la dimensión en línea. Puedes usar cualquiera de los formatos de color CSS válidos.

También puedes especificar colores diferentes para el inicio y el final de la dimensión en línea:

selector {
  border-inline-color: <color-inicio> <color-fin>;
}

Valores de la Propiedad border-inline-color

Puedes usar los siguientes tipos de valores para especificar el color de los bordes en línea:

• Nombres de colores: Como red, blue, green, orange, etc.
• Valores hexadecimales: Como #FF0000, #00FF00, #0000FF, etc.
• Valores RGB: Como rgb(255, 0, 0), rgb(0, 128, 0), rgb(0, 0, 255), etc.
• Valores RGBA: Como rgba(255, 0, 0, 0.5), rgba(0, 128, 0, 0.8), etc.
• Valores HSL: Como hsl(0, 100%, 50%), hsl(120, 100%, 50%), etc.
• Valores HSLA: Como hsla(0, 100%, 50%, 0.7), hsla(240, 100%, 50%, 0.9), etc.
• transparent: Para hacer el color del borde completamente transparente.

Especificando un Solo Color

Cuando se proporciona un solo valor a border-inline-color, este color se aplica tanto al borde al inicio de la dimensión en línea como al borde al final de la dimensión en línea.

Ejemplo (Modo de escritura horizontal, dirección ltr):

.elemento-un-color {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 20px;
  border-style: solid; /* Necesitas un estilo para que el color sea visible */
  border-width: 5px;   /* Necesitas un ancho para que el color sea visible */
  border-inline-color: blue; /* Los bordes izquierdo y derecho serán azules */
}

Especificando Dos Colores

Cuando se proporcionan dos valores a border-inline-color, el primer valor se aplica al color del borde al inicio de la dimensión en línea, y el segundo valor se aplica al color del borde al final de la dimensión en línea.

Ejemplo (Modo de escritura horizontal, dirección ltr):

.elemento-dos-colores {
  width: 250px;
  height: 80px;
  background-color: #e0e0e0;
  margin: 20px;
  border-style: dashed;
  border-width: 3px;
  border-inline-color: green orange; /* El borde izquierdo será verde, el borde derecho será naranja */
}

Propiedades Lógicas Individuales Relacionadas

border-inline-color es una propiedad abreviada para establecer los colores de los siguientes bordes lógicos individuales:

• border-inline-start-color: Establece el color del borde al inicio de la dimensión en línea. En un flujo de texto de izquierda a derecha, esto corresponde al borde izquierdo.
• border-inline-end-color: Establece el color del borde al final de la dimensión en línea. En un flujo de texto de izquierda a derecha, esto corresponde al borde derecho.

Puedes usar border-inline-color para establecer ambos colores simultáneamente, o usar las propiedades individuales para un control más específico.

Comportamiento en Diferentes Modos de Escritura y Direcciones

La principal ventaja de usar border-inline-color es su adaptabilidad a diferentes modos de escritura y direcciones de texto:

• En un modo de escritura horizontal (horizontal-tb) con dirección de izquierda a derecha (ltr, que es el predeterminado), border-inline-color afectará los colores de los bordes izquierdo y derecho. El primer color especificado (si hay dos) se aplicará al borde izquierdo y el segundo al borde derecho.

• En un modo de escritura horizontal con dirección de derecha a izquierda (rtl), border-inline-color seguirá afectando los colores de los bordes en la dimensión en línea, pero ahora el primer color se aplicará al borde derecho y el segundo al borde izquierdo.

• En un modo de escritura vertical (vertical-rl o vertical-lr), la dimensión en línea se convierte en la dirección vertical. Por lo tanto, border-inline-color afectará los colores de los bordes superior e inferior. El primer color se aplicará al borde superior (en vertical-lr) o al borde inferior (en vertical-rl), y el segundo al borde inferior (en vertical-lr) o al borde superior (en vertical-rl). La dirección (ltr o rtl) también puede influir en este mapeo en algunos casos.

Relación con las Propiedades de Color de Borde Físicas

En un contexto predeterminado (modo de escritura horizontal, dirección ltr):

• border-inline-color: red; es equivalente a:
  CSS

   

  border-left-color: red;
  border-right-color: red;
  

• border-inline-color: green yellow; es equivalente a:
  CSS

   

  border-left-color: green;
  border-right-color: yellow;
  

Sin embargo, esta equivalencia no se mantiene en otros modos de escritura o direcciones.

Ejemplos Prácticos

Aquí tienes algunos ejemplos de cómo usar border-inline-color en diferentes contextos:

Ejemplo 1: Modo de escritura horizontal (LTR)

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-style: solid;
    border-width: 5px;
    border-inline-color: purple; /* Borde izquierdo y derecho morados */
  }

  .elemento-diferente {
    width: 250px;
    height: 80px;
    background-color: #e0e0e0;
    margin: 20px;
    border-style: dashed;
    border-width: 3px;
    border-inline-color: navy teal; /* Borde izquierdo azul oscuro, borde derecho verde azulado */
  }
</style>
</head>
<body>

  <div class="elemento">Borde en línea morado.</div>
  <div class="elemento-diferente">Bordes en línea con diferentes colores.</div>

</body>
</html>

Ejemplo 2: Modo de escritura horizontal (RTL)

<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    direction: rtl; /* Texto de derecha a izquierda */
  }
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-style: solid;
    border-width: 5px;
    border-inline-color: purple; /* Ahora el borde derecho e izquierdo serán morados */
  }

  .elemento-diferente {
    width: 250px;
    height: 80px;
    background-color: #e0e0e0;
    margin: 20px;
    border-style: dashed;
    border-width: 3px;
    border-inline-color: navy teal; /* Ahora el borde derecho será azul oscuro, el borde izquierdo verde azulado */
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento">Borde en línea morado en RTL.</div>
    <div class="elemento-diferente">Bordes en línea con diferentes colores en RTL.</div>
  </div>

</body>
</html>

Ejemplo 3: Modo de escritura vertical

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 80px;
    height: 150px;
    background-color: #f0f0f0;
    margin: 20px;
    writing-mode: vertical-lr; /* Texto vertical de arriba a abajo */
    border-style: dotted;
    border-width: 4px;
    border-inline-color: fuchsia; /* Ahora los bordes superior e inferior serán fucsia */
  }

  .elemento-diferente {
    width: 70px;
    height: 180px;
    background-color: #e0e0e0;
    margin: 20px;
    writing-mode: vertical-rl; /* Texto vertical de derecha a izquierda */
    border-style: double;
    border-width: 6px;
    border-inline-color: lime maroon; /* El borde inferior será lima, el borde superior será marrón */
  }
</style>
</head>
<body>

  <div class="elemento">Texto Vertical con borde en línea fucsia.</div>
  <div class="elemento-diferente">Texto Vertical (RL) con diferentes colores en el borde en línea.</div>

</body>
</html>

Casos de Uso Comunes

• Establecer el color de los bordes izquierdo y derecho de manera lógica, adaptándose a la dirección del texto.
• Definir el color de los bordes superior e inferior en modos de escritura verticales.
• Crear estilos de borde consistentes en aplicaciones web internacionalizadas.

Compatibilidad del Navegador

La propiedad border-inline-color tiene buena compatibilidad con los navegadores modernos. Sin embargo, es posible que navegadores más antiguos no la soporten.

Consideraciones

• Recuerda que debes establecer las propiedades border-style y border-width para que el color del borde sea visible.
• Utiliza border-inline-start-color y border-inline-end-color para un control más específico sobre el color de cada borde en la dimensión en línea.

Conclusión

La propiedad border-inline-color es una herramienta útil para crear estilos de borde que se adaptan a diferentes contextos de escritura. Al utilizarla, puedes asegurarte de que tus diseños web sean más flexibles y estén preparados para la internacionalización. Experimenta con diferentes colores y modos de escritura para ver cómo se comporta esta propiedad.