La Propiedad BORDER-INLINE-END-STYLE

La propiedad border-inline-end-style 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-style 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-style es una herramienta valiosa para crear diseños web que se adaptan a diferentes idiomas y sistemas de escritura, facilitando la internacionalización (i18n).

Sintaxis Básica

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

CSS 

selector {
  border-inline-end-style: <estilo>;
}

Donde <estilo> es una de las palabras clave que define el estilo del borde.

Valores de la Propiedad `border-inline-end-style`

Puedes usar los siguientes valores para especificar el estilo del borde final en línea:

none: No se muestra ningún borde. El valor computado de border-width es 0.
hidden: Similar a none, pero con algunas diferencias en el comportamiento de colapso de bordes en tablas.
dotted: Un borde punteado.
dashed: Un borde de guiones.
solid: Un borde de línea continua.
double: Un borde de doble línea. La suma de las dos líneas y el espacio entre ellas es igual al valor de border-width.
groove: Un borde con apariencia de surco 3D.
ridge: Un borde con apariencia de cresta 3D.
inset: Un borde que hace que el contenido parezca estar incrustado.
outset: Un borde que hace que el contenido parezca sobresalir.

Relación con la Propiedad Abreviada `border-inline-end`

border-inline-end-style es una de las propiedades individuales que se pueden establecer utilizando la propiedad abreviada border-inline-end. Por ejemplo:

CSS 

.elemento-abreviado {
  border-inline-end: 2px solid blue; /* Establece ancho, estilo y color */
}

es equivalente a:

CSS 

.elemento-individual {
  border-inline-end-width: 2px;
  border-inline-end-style: solid;
  border-inline-end-color: blue;
}

Comportamiento en Diferentes Modos de Escritura y Direcciones

La propiedad border-inline-end-style se adapta al flujo del contenido:

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

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

En un contexto predeterminado (modo de escritura horizontal, dirección ltr), border-inline-end-style es funcionalmente equivalente a la propiedad física border-right-style. Sin embargo, al utilizar border-inline-end-style, 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-style en diferentes contextos:

Ejemplo 1: Borde sólido 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-width: 5px; /* Necesitas un ancho para que el estilo sea visible */
    border-color: black; /* Necesitas un color para que el estilo sea visible */
    border-inline-end-style: solid; /* El borde derecho será sólido */
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene un borde sólido al final de la línea.</div>

</body>
</html>

Ejemplo 2: Borde punteado 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-width: 3px;
    border-color: red;
    border-inline-end-style: dotted; /* Ahora el borde izquierdo será punteado */
  }
</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 doble 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-width: 6px;
    border-color: blue;
    border-inline-end-style: double; /* Ahora el borde inferior será doble */
  }
</style>
</head>
<body>

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

</body>
</html>

Casos de Uso Comunes

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

Compatibilidad del Navegador

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

Consideraciones

Recuerda que debes establecer las propiedades border-width y border-color (o la propiedad abreviada border-inline-end) para que el estilo del borde sea visible.
Utiliza border-inline-start-style para establecer el estilo del borde al inicio de la dimensión en línea.

Conclusión

La propiedad border-inline-end-style es una herramienta importante para controlar la apariencia del borde al final de la dimensión en línea de un elemento. Al utilizarla, puedes crear estilos de borde que se adaptan a diferentes contextos de escritura, lo que contribuye a la creación de diseños web más flexibles y accesibles a nivel global. Experimenta con diferentes estilos y modos de escritura para ver cómo se comporta esta propiedad en diversas situaciones.