La Propiedad BORDER-INLINE-STYLE

La propiedad border-inline-style en CSS se utiliza para establecer el estilo 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-style es una propiedad abreviada que te permite definir el estilo 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-style es la siguiente:

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

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

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

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

Valores de la Propiedad border-inline-style

Puedes usar los siguientes valores para especificar el estilo de los bordes 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.

Especificando un Solo Estilo

Cuando se proporciona un solo valor a border-inline-style, este estilo 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):

.elemento-un-estilo {
  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-style: dashed; /* Los bordes izquierdo y derecho serán de guiones */
}

Especificando Dos Estilos

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

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

.elemento-dos-estilos {
  width: 250px;
  height: 80px;
  background-color: #e0e0e0;
  margin: 20px;
  border-width: 3px;
  border-color: blue;
  border-inline-style: dotted solid; /* El borde izquierdo será punteado, el borde derecho será sólido */
}

Propiedades Lógicas Individuales Relacionadas

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

• border-inline-start-style: Establece el estilo 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-style: Establece el estilo 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-style para establecer ambos estilos 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-style 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-style afectará los estilos de los bordes izquierdo y derecho. El primer estilo 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-style seguirá afectando los estilos de los bordes en la dimensión en línea, pero ahora el primer estilo 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-style afectará los estilos de los bordes superior e inferior. El primer estilo 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 Estilo de Borde Físicas

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

• border-inline-style: solid; es equivalente a:
  CSS

   

  border-left-style: solid;
  border-right-style: solid;
  

• border-inline-style: dashed dotted; es equivalente a:
  CSS

   

  border-left-style: dashed;
  border-right-style: dotted;
  

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-style en diferentes contextos:

Ejemplo 1: Modo de escritura horizontal (LTR)

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-width: 5px;
    border-color: black;
    border-inline-style: solid; /* Bordes izquierdo y derecho sólidos */
  }

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

  <div class="elemento">Borde en línea sólido.</div>
  <div class="elemento-diferente">Bordes en línea con diferentes estilos.</div>

</body>
</html>

Ejemplo 2: Modo de escritura horizontal (RTL)

<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    direction: rtl; /* Texto de derecha a izquierda */
  }
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-width: 5px;
    border-color: black;
    border-inline-style: solid; /* Ahora los bordes derecho e izquierdo serán sólidos */
  }

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

  <div class="contenedor">
    <div class="elemento">Borde en línea sólido en RTL.</div>
    <div class="elemento-diferente">Bordes en línea con diferentes estilos en RTL.</div>
  </div>

</body>
</html>

Ejemplo 3: Modo de escritura vertical

<!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: 4px;
    border-color: black;
    border-inline-style: dotted; /* Ahora los bordes superior e inferior serán punteados */
  }

  .elemento-diferente {
    width: 70px;
    height: 180px;
    background-color: #e0e0e0;
    margin: 20px;
    writing-mode: vertical-rl; /* Texto vertical de derecha a izquierda */
    border-width: 6px;
    border-color: red;
    border-inline-style: double dashed; /* El borde inferior será doble, el borde superior será de guiones */
  }
</style>
</head>
<body>

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

</body>
</html>

Casos de Uso Comunes

• Establecer el estilo de los bordes izquierdo y derecho de manera lógica, adaptándose a la dirección del texto.
• Definir el estilo 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-style 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-width y border-color para que el estilo del borde sea visible.
• Utiliza border-inline-start-style y border-inline-end-style para un control más específico sobre el estilo de cada borde en la dimensión en línea.

Conclusión

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