La Propiedad BORDER-INLINE

La propiedad border-inline en CSS es una propiedad abreviada que se utiliza para establecer el estilo del borde en la dimensión en línea de un elemento. En la mayoría de los idiomas (como el español), donde el texto fluye horizontalmente 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 el texto vertical), la dimensión en línea podría corresponder a los bordes superior e inferior.

border-inline es parte del conjunto de propiedades lógicas de CSS, diseñadas para facilitar la creación de diseños que se adaptan a diferentes modos de escritura y direcciones de texto, lo cual es crucial para la internacionalización (i18n) y la localización (l10n) de aplicaciones web.

Sintaxis Básica

La propiedad border-inline es una propiedad abreviada que puede aceptar uno, dos o tres valores, en cualquier orden, correspondientes a:

• <border-width>: El grosor del borde.
• <border-style>: El estilo del borde (por ejemplo, solid, dashed, dotted).
• <color>: El color del borde.

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

También puedes especificar solo algunos de estos valores, en cuyo caso los valores faltantes tomarán sus valores iniciales.

Valores en Detalle

• <border-width>: Define el grosor del borde. Puede ser un valor absoluto (como 1px, 2em) o una de las palabras clave thin, medium o thick.

• <border-style>: Especifica la apariencia del borde. Algunos valores comunes incluyen:

  • none: Sin borde.
  • solid: Una línea continua.
  • dashed: Una serie de guiones.
  • dotted: Una serie de puntos.
  • double: Dos líneas sólidas.
  • groove, ridge, inset, outset: Efectos tridimensionales que dependen del color del borde.

• <color>: Establece el color del borde. Puedes usar nombres de colores (como red, blue), valores hexadecimales (#FF0000), valores RGB (rgb(255, 0, 0)), etc.

Propiedades Lógicas Individuales Relacionadas

border-inline es una abreviatura de las siguientes propiedades lógicas individuales:

• border-inline-start: Establece el estilo 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: Establece el estilo 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 para establecer ambos bordes en línea 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 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 afectará los bordes izquierdo y derecho. border-inline-start corresponderá al borde izquierdo y border-inline-end al borde derecho.

• En un modo de escritura horizontal con dirección de derecha a izquierda (rtl), border-inline seguirá afectando los bordes en la dimensión en línea, pero ahora border-inline-start corresponderá al borde derecho y border-inline-end 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 afectará los bordes superior e inferior. border-inline-start corresponderá al borde superior (en vertical-lr) o al borde inferior (en vertical-rl), y border-inline-end 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 Borde Físicas

Es importante entender cómo border-inline se relaciona con las propiedades de borde físicas tradicionales como border-left y border-right:

• En un contexto predeterminado (modo de escritura horizontal, dirección ltr), establecer border-inline es equivalente a establecer border-left y border-right con los mismos valores.
• Sin embargo, si cambias el modo de escritura o la dirección, esta equivalencia ya no se mantiene, y border-inline se adapta lógicamente.

Ejemplos Prácticos

Aquí tienes algunos ejemplos de cómo usar border-inline:

Ejemplo 1: Borde sólido rojo en la dimensión en línea

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-inline: 2px solid red; /* Borde rojo de 2px en los lados izquierdo y derecho (en ltr) */
  }
</style>
</head>
<body>

  <div class="elemento">Este es un elemento con borde en línea.</div>

</body>
</html>

Ejemplo 2: Diferentes estilos y grosores en la dimensión en línea

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 250px;
    height: 80px;
    background-color: #e0e0e0;
    margin: 20px;
    border-inline-start: 5px dashed blue; /* Borde izquierdo azul de 5px (en ltr) */
    border-inline-end: 3px solid green;   /* Borde derecho verde de 3px (en ltr) */
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene diferentes bordes en línea.</div>

</body>
</html>

Ejemplo 3: Adaptación a la dirección de derecha a izquierda (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-inline: 2px solid red; /* Ahora el borde rojo estará a la derecha e izquierda */
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento">Este es un elemento con borde en línea en RTL.</div>
  </div>

</body>
</html>

Ejemplo 4: Uso en 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-inline: 3px dotted purple; /* Ahora el borde punteado estará arriba y abajo */
  }
</style>
</head>
<body>

  <div class="elemento">Texto<br>Vertical<br>con<br>borde<br>en<br>línea.</div>

</body>
</html>

Casos de Uso Comunes

• Creación de diseños que funcionan correctamente en idiomas que se leen de derecha a izquierda.
• Estilización de componentes de interfaz de usuario que deben ser adaptables a diferentes modos de escritura.
• Simplificación del código CSS al utilizar propiedades lógicas en lugar de tener que gestionar diferentes estilos para diferentes direcciones.

Compatibilidad del Navegador

Las propiedades lógicas de borde, incluyendo border-inline y sus propiedades individuales, tienen buena compatibilidad con los navegadores modernos. Sin embargo, es posible que navegadores más antiguos no las soporten completamente.

Consideraciones

• Al utilizar propiedades lógicas, tu CSS se vuelve más semántico y refleja la intención del diseño en lugar de depender de la dirección física del texto.
• Para proyectos que requieren soporte para múltiples idiomas con diferentes direcciones de texto, el uso de propiedades lógicas como border-inline es altamente recomendado.

Conclusión

La propiedad border-inline es una herramienta poderosa en CSS para crear bordes que se adaptan inteligentemente a diferentes modos de escritura y direcciones de texto. Al utilizarla, puedes escribir código CSS más limpio y crear diseños web más accesibles y globalizados. Recuerda que es una propiedad abreviada para los bordes en la dimensión en línea, y puedes usar las propiedades individuales border-inline-start y border-inline-end para un control más granular.