La Propiedad BORDER-INLINE-END

La propiedad border-inline-end en CSS se utiliza para establecer el estilo del borde en el lado final de la dimensión en línea de un elemento.

La propiedad border-inline-end en CSS se utiliza para establecer el estilo del borde en el lado final de la dimensión en línea de un elemento. Al igual que otras propiedades con el prefijo inline-, forma parte de las propiedades lógicas de CSS. Esto significa que el borde afectado depende del modo de escritura y la dirección del texto del elemento.

En la mayoría de los idiomas (como el español), donde el texto fluye horizontalmente de izquierda a derecha, el lado final de la dimensión en línea corresponde al borde derecho. Sin embargo, en contextos con diferentes modos de escritura (como texto vertical) o direcciones (como derecha a izquierda), el lado final de la dimensión en línea podría referirse al borde izquierdo, superior o inferior.

border-inline-end es una forma lógica de pensar en los bordes, lo que facilita la creación de diseños que se adaptan a diferentes idiomas y sistemas de escritura.

Sintaxis Básica

La propiedad border-inline-end 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.

CSS 

selector {
  border-inline-end: <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-end es una abreviatura de las siguientes propiedades lógicas individuales:

border-inline-end-width: Establece el ancho del borde al final de la dimensión en línea.
border-inline-end-style: Establece el estilo del borde al final de la dimensión en línea.
border-inline-end-color: Establece el color del borde al final de la dimensión en línea.

Puedes usar border-inline-end para establecer las tres propiedades relacionadas con el borde final en línea de una sola vez.

Comportamiento en Diferentes Modos de Escritura y Direcciones

La clave para entender border-inline-end es comprender cómo se mapea al borde físico dependiendo del contexto:

Modo de escritura horizontal (horizontal-tb), dirección de izquierda a derecha (ltr - predeterminado): border-inline-end corresponde al borde derecho.
Modo de escritura horizontal (horizontal-tb), dirección de derecha a izquierda (rtl): border-inline-end corresponde al borde izquierdo.
Modo de escritura vertical de arriba a abajo (vertical-lr), dirección (ltr o rtl no suele afectar aquí): border-inline-end corresponde al borde inferior.
Modo de escritura vertical de derecha a izquierda (vertical-rl), dirección (ltr o rtl no suele afectar aquí): border-inline-end corresponde al borde superior.

Relación con la Propiedad de Borde Física `border-right`

En un contexto predeterminado (modo de escritura horizontal, dirección ltr), border-inline-end es funcionalmente equivalente a la propiedad física border-right. Sin embargo, al utilizar border-inline-end, tu CSS se vuelve más adaptable a diferentes contextos de escritura.

Ejemplos Prácticos

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

Ejemplo 1: Borde sólido rojo en el lado final de la dimensión en línea (LTR)

HTML 

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

  <div class="elemento">Este es un elemento con borde al final de la línea.</div>

</body>
</html>

Ejemplo 2: Borde punteado azul en el lado final de la dimensión en línea (RTL)

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    direction: rtl; /* Texto de derecha a izquierda */
  }
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #e0e0e0;
    margin: 20px;
    border-inline-end: 3px dotted blue; /* Ahora el borde izquierdo será punteado azul */
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento">Este elemento tiene un borde punteado al final de la línea en RTL.</div>
  </div>

</body>
</html>

Ejemplo 3: Borde grueso verde en el lado final de la dimensión en línea (Modo de escritura vertical)

HTML 

<!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-end: thick solid green; /* Ahora el borde inferior será grueso y verde */
  }
</style>
</head>
<body>

  <div class="elemento">Texto<br>Vertical<br>con<br>borde<br>al<br>final.</div>

</body>
</html>

Ejemplo 4: Especificando ancho, estilo y color por separado

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #e0e0e0;
    margin: 20px;
    border-inline-end-width: 5px;
    border-inline-end-style: dashed;
    border-inline-end-color: purple;
  }
</style>
</head>
<body>

  <div class="elemento">Borde al final de la línea con propiedades individuales.</div>

</body>
</html>

Casos de Uso Comunes

Estilizar el borde derecho en la mayoría de los diseños occidentales sin usar la propiedad física border-right.
Crear diseños que se adapten automáticamente a idiomas de derecha a izquierda, donde el borde final de la línea visualmente está a la izquierda.
Aplicar estilos específicos al borde inferior en modos de escritura verticales.

Compatibilidad del Navegador

Las propiedades lógicas de borde, incluyendo border-inline-end 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

Utilizar propiedades lógicas como border-inline-end mejora la internacionalización de tus páginas web al hacer que los estilos dependan del flujo del contenido en lugar de la dirección física.
Recuerda que también puedes usar las propiedades individuales (border-inline-end-width, border-inline-end-style, border-inline-end-color) para un control más granular sobre el estilo del borde.

Conclusión

La propiedad border-inline-end es una herramienta valiosa para crear estilos de borde que se adaptan a diferentes contextos de escritura en la web. Al utilizarla, puedes escribir código CSS más semántico y crear diseños más flexibles y accesibles a nivel global. Experimenta con diferentes valores y modos de escritura para ver cómo se comporta esta propiedad en diferentes situaciones.