La Propiedad BORDER-INLINE-WIDTH

La propiedad border-inline-width en CSS se utiliza para establecer el ancho de los bordes de un elemento que se encuentran en la dimensión en línea.

La propiedad border-inline-width en CSS se utiliza para establecer el ancho de los bordes de un elemento que se encuentran en la dimensión en línea. Al igual que otras propiedades con el prefijo inline-, forma parte de las propiedades lógicas de CSS. Esto significa que los bordes afectados dependen del modo de escritura y la dirección del texto del elemento.

En la mayoría de los casos (modo de escritura horizontal 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 texto vertical) o direcciones (como derecha a izquierda), la dimensión en línea podría referirse a los bordes superior e inferior, o a la derecha e izquierda en un orden diferente.

border-inline-width es una propiedad abreviada que te permite definir el ancho de los bordes al inicio y al final de la dimensión en línea de manera lógica.

Sintaxis Básica

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

CSS 

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

Donde <ancho> puede ser un valor de longitud o una palabra clave.

También puedes especificar anchos diferentes para el inicio y el final de la dimensión en línea:

CSS 

selector {
  border-inline-width: <ancho-inicio> <ancho-fin>;
}

Valores de la Propiedad `border-inline-width`

Puedes usar los siguientes tipos de valores para especificar el ancho de los bordes 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-width: 2px;
}

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

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-width: thin;
}

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

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

Especificando un Solo Ancho

Cuando se proporciona un solo valor a border-inline-width, este ancho se aplica tanto al borde al inicio de la dimensión en línea como al borde al final de la dimensión en línea.

Ejemplo (Modo de escritura horizontal, dirección ltr):

CSS 

.elemento-un-ancho {
  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-width: 5px; /* Los bordes izquierdo y derecho tendrán un ancho de 5px */
}

Especificando Dos Anchos

Cuando se proporcionan dos valores a border-inline-width, el primer valor se aplica al ancho del borde al inicio de la dimensión en línea, y el segundo valor se aplica al ancho del borde al final de la dimensión en línea.

Ejemplo (Modo de escritura horizontal, dirección ltr):

CSS 

.elemento-dos-anchos {
  width: 250px;
  height: 80px;
  background-color: #e0e0e0;
  margin: 20px;
  border-style: dashed;
  border-color: blue;
  border-inline-width: 2px 8px; /* El borde izquierdo tendrá 2px, el borde derecho tendrá 8px */
}

Propiedades Lógicas Individuales Relacionadas

border-inline-width es una propiedad abreviada para establecer los anchos de los siguientes bordes lógicos individuales:

border-inline-start-width: Establece el ancho 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-width: Establece el ancho 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-width para establecer ambos anchos 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-width 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-width afectará los anchos de los bordes izquierdo y derecho. El primer ancho especificado (si hay dos) se aplicará al borde izquierdo y el segundo al borde derecho.
En un modo de escritura horizontal con dirección de derecha a izquierda (rtl), border-inline-width seguirá afectando los anchos de los bordes en la dimensión en línea, pero ahora el primer ancho se aplicará al borde derecho y el segundo 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-width afectará los anchos de los bordes superior e inferior. El primer ancho se aplicará al borde superior (en vertical-lr) o al borde inferior (en vertical-rl), y el segundo 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 Ancho de Borde Físicas

En un contexto predeterminado (modo de escritura horizontal, dirección ltr):

border-inline-width: 3px; es equivalente a:

CSS 

border-left-width: 3px;
border-right-width: 3px;

border-inline-width: thin thick; es equivalente a:

CSS 

border-left-width: thin;
border-right-width: thick;

Sin embargo, esta equivalencia no se mantiene en otros modos de escritura o direcciones.

Ejemplos Prácticos

Aquí tienes algunos ejemplos de cómo usar border-inline-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;
    border-color: black;
    border-inline-width: 5px; /* Ancho de 5px en los bordes izquierdo y derecho */
  }

  .elemento-diferente {
    width: 250px;
    height: 80px;
    background-color: #e0e0e0;
    margin: 20px;
    border-style: dashed;
    border-color: blue;
    border-inline-width: 2px 8px; /* Borde izquierdo de 2px, borde derecho de 8px */
  }
</style>
</head>
<body>

  <div class="elemento">Borde en línea de 5px.</div>
  <div class="elemento-diferente">Bordes en línea con diferentes anchos.</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: #f0f0f0;
    margin: 20px;
    border-style: solid;
    border-color: black;
    border-inline-width: 5px; /* Ahora el ancho de 5px estará en los bordes derecho e izquierdo */
  }

  .elemento-diferente {
    width: 250px;
    height: 80px;
    background-color: #e0e0e0;
    margin: 20px;
    border-style: dashed;
    border-color: blue;
    border-inline-width: 2px 8px; /* Ahora el borde derecho tendrá 2px, el borde izquierdo tendrá 8px */
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento">Borde en línea de 5px en RTL.</div>
    <div class="elemento-diferente">Bordes en línea con diferentes anchos 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: black;
    border-inline-width: 4px; /* Ancho de 4px en los bordes superior e inferior */
  }

  .elemento-diferente {
    width: 70px;
    height: 180px;
    background-color: #e0e0e0;
    margin: 20px;
    writing-mode: vertical-rl; /* Texto vertical de derecha a izquierda */
    border-style: double;
    border-color: red;
    border-inline-width: thick thin; /* Borde inferior grueso, borde superior delgado */
  }
</style>
</head>
<body>

  <div class="elemento">Texto Vertical con borde en línea de 4px.</div>
  <div class="elemento-diferente">Texto Vertical (RL) con diferentes anchos en el borde en línea.</div>

</body>
</html>

Casos de Uso Comunes

Establecer el ancho de los bordes izquierdo y derecho de manera lógica, adaptándose a la dirección del texto.
Definir el ancho de los bordes superior e inferior en modos de escritura verticales.
Crear estilos de borde consistentes en aplicaciones web internacionalizadas.

Compatibilidad del Navegador

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

Consideraciones

Recuerda que debes establecer las propiedades border-style y border-color para que el ancho del borde sea visible.
Utiliza border-inline-start-width y border-inline-end-width para un control más específico sobre el ancho de cada borde en la dimensión en línea.

Conclusión

La propiedad border-inline-width 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 anchos de los bordes en la dimensión en línea, y puedes usar las propiedades individuales para un control más granular.