La Propiedad BORDER-INLINE-START-WIDTH

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

 

La propiedad border-inline-start-width en CSS se utiliza para establecer el ancho 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-width es esencial para controlar el grosor del borde al inicio de la línea de texto, facilitando la creación de diseños web adaptables a diferentes idiomas y modos de escritura.

Sintaxis Básica

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

CSS
 
selector {
  border-inline-start-width: <ancho>;
}

Donde <ancho> es el valor que define el grosor del borde.

Valores de la Propiedad border-inline-start-width

Puedes usar los siguientes tipos de valores para especificar el ancho del borde inicial en línea:

  • Valores de longitud: Especificados en unidades como píxeles (px), ems (em), rems (rem), viewport width (vw), viewport height (vh), etc.

    CSS
     
    .ancho-pixeles {
  border-inline-start-width: 3px;
}

.ancho-ems {
  font-size: 16px; /* Ejemplo para calcular el em */
  border-inline-start-width: 0.2em; /* Ancho de 0.2 * 16px = 3.2px */
}

  • Valores de palabra clave:

    • thin: Un borde delgado. El grosor exacto varía según el navegador.
    • medium: Un borde de grosor medio. Es el valor predeterminado.
    • thick: Un borde grueso. El grosor exacto varía según el navegador.
    CSS
     
    .ancho-delgado {
  border-inline-start-width: thin;
}

.ancho-medio {
  border-inline-start-width: medium;
}

.ancho-grueso {
  border-inline-start-width: thick;
}

Relación con la Propiedad Abreviada border-inline-start

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

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

es equivalente a:

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

Comportamiento en Diferentes Modos de Escritura y Direcciones

La propiedad border-inline-start-width se adapta al flujo del contenido:

  • Modo de escritura horizontal (horizontal-tb), dirección de izquierda a derecha (ltr - predeterminado): border-inline-start-width establece el ancho del borde izquierdo.

  • Modo de escritura horizontal (horizontal-tb), dirección de derecha a izquierda (rtl): border-inline-start-width establece el ancho del borde derecho.

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

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

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

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

Ejemplo 1: Modo de escritura horizontal (LTR)

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-style: solid; /* Necesitas un estilo para que el ancho sea visible */
    border-color: black; /* Necesitas un color para que el ancho sea visible */
    border-inline-start-width: 5px; /* El borde izquierdo tendrá un ancho de 5 píxeles */
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene un borde de 5px al inicio de la línea.</div>

</body>
</html>

Ejemplo 2: Modo de escritura horizontal (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-style: dashed;
    border-color: red;
    border-inline-start-width: thick; /* Ahora el borde derecho será grueso */
  }
</style>
</head>
<body>

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

</body>
</html>

Ejemplo 3: 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-style: dotted;
    border-color: blue;
    border-inline-start-width: 8px; /* Ahora el borde superior tendrá un ancho de 8 píxeles */
  }
</style>
</head>
<body>

  <div class="elemento">Texto<br>Vertical<br>con<br>borde<br>de<br>8px<br>al<br>inicio.</div>

</body>
</html>

Casos de Uso Comunes

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

Compatibilidad del Navegador

La propiedad border-inline-start-width 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-style y border-color (o la propiedad abreviada border-inline-start) para que el ancho del borde sea visible.
  • Utiliza border-inline-end-width para establecer el ancho del borde al final de la dimensión en línea.

Conclusión

La propiedad border-inline-start-width es una herramienta fundamental para controlar el grosor del borde al inicio de la dimensión en línea de un elemento. Al utilizarla, puedes crear estilos de borde precisos y adaptables 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 valores y modos de escritura para ver cómo se comporta esta propiedad en diversas situaciones.