La Propiedad BORDER-INLINE-START

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

 

La propiedad border-inline-start en CSS se utiliza para establecer el estilo del borde en el lado inicial 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 inicial de la dimensión en línea corresponde al borde izquierdo. Sin embargo, en contextos con diferentes modos de escritura (como texto vertical) o direcciones (como derecha a izquierda), el lado inicial de la dimensión en línea podría referirse al borde derecho, superior o inferior.

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

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

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

Comportamiento en Diferentes Modos de Escritura y Direcciones

La clave para entender border-inline-start 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-start corresponde al borde izquierdo.

  • Modo de escritura horizontal (horizontal-tb), dirección de derecha a izquierda (rtl): border-inline-start corresponde al borde derecho.

  • Modo de escritura vertical de arriba a abajo (vertical-lr), dirección (ltr o rtl no suele afectar aquí): border-inline-start corresponde al borde superior.

  • Modo de escritura vertical de derecha a izquierda (vertical-rl), dirección (ltr o rtl no suele afectar aquí): border-inline-start corresponde al borde inferior.

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

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

Ejemplo 1: Borde sólido rojo en el lado inicial 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-start: 2px solid red; /* Borde izquierdo rojo de 2px */
  }
</style>
</head>
<body>

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

</body>
</html>

Ejemplo 2: Borde punteado azul en el lado inicial 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-start: 3px dotted blue; /* Ahora el borde derecho será punteado azul */
  }
</style>
</head>
<body>

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

</body>
</html>

Ejemplo 3: Borde grueso verde en el lado inicial 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-start: thick solid green; /* Ahora el borde superior será grueso y verde */
  }
</style>
</head>
<body>

  <div class="elemento">Texto<br>Vertical<br>con<br>borde<br>al<br>inicio.</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-start-width: 5px;
    border-inline-start-style: dashed;
    border-inline-start-color: purple;
  }
</style>
</head>
<body>

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

</body>
</html>

Casos de Uso Comunes

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

Compatibilidad del Navegador

Las propiedades lógicas de borde, incluyendo border-inline-start 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-start 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-start-width, border-inline-start-style, border-inline-start-color) para un control más granular sobre el estilo del borde.

Conclusión

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