La Propiedad BORDER-BLOCK

Es una propiedad abreviada que se utiliza para establecer el ancho, el estilo y el color de los bordes en las direcciones de inicio y fin del bloque de un elemento.

La propiedad border-block en CSS es una propiedad abreviada que se utiliza para establecer el ancho, el estilo y el color de los bordes en las direcciones de inicio y fin del bloque de un elemento. Esta propiedad es parte de las Propiedades Lógicas de CSS, diseñadas para facilitar la creación de diseños que se adaptan bien a diferentes modos de escritura (horizontal, vertical) y direcciones del texto (de izquierda a derecha, de derecha a izquierda).

En la mayoría de los idiomas (como el español), la dirección del bloque es vertical. Por lo tanto, border-block típicamente afectará los bordes superior e inferior del elemento. Sin embargo, en modos de escritura verticales, afectará los bordes izquierdo y derecho.

Sintaxis Básica

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

CSS
 
selector {
  border-block: <ancho> <estilo> <color>;
}

Donde:

  • <ancho>: Especifica el grosor del borde. Puede ser una palabra clave (thin, medium, thick) o un valor en unidades de medida (píxeles px, ems em, etc.).
  • <estilo>: Define la apariencia del borde. Hay varios estilos disponibles (como solid, dashed, dotted, etc.).
  • <color>: Establece el color del borde. Puede ser un nombre de color (red, blue), un valor hexadecimal (#FF0000), un valor RGB (rgb(255, 0, 0)), etc.

Al igual que con la propiedad border, el orden de los valores no importa.

Propiedades Individuales de border-block

La propiedad border-block es una abreviatura de las siguientes propiedades lógicas individuales:

  • border-block-start: Establece las propiedades del borde al inicio del bloque (en un modo horizontal, esto es el borde superior).
  • border-block-end: Establece las propiedades del borde al final del bloque (en un modo horizontal, esto es el borde inferior).

Estas propiedades a su vez tienen sus propias sub-propiedades para el ancho, el estilo y el color (por ejemplo, border-block-start-width, border-block-start-style, border-block-start-color).

Valores para la Propiedad border-block

Los valores que puedes usar para <ancho>, <estilo> y <color> son los mismos que se utilizan para la propiedad border y sus contrapartes físicas (border-width, border-style, border-color).

Ejemplos:

CSS
 
.borde-bloque-solido {
  border-block: 2px solid black;
}

.borde-bloque-punteado {
  border-block: thin dotted blue;
}

.borde-bloque-grueso-rojo {
  border-block: thick dashed red;
}

.borde-bloque-con-unidades {
  border-block: 5px solid #336699;
}

Comportamiento en Diferentes Modos de Escritura

La principal ventaja de border-block es su adaptabilidad a diferentes modos de escritura.

  • Modo de Escritura Horizontal (horizontal-tb - predeterminado):

    • border-block-start se aplica al borde superior.
    • border-block-end se aplica al borde inferior.

  • Modo de Escritura Vertical (vertical-rl o vertical-lr):

    • border-block-start se aplica al borde derecho (vertical-rl) o izquierdo (vertical-lr).
    • border-block-end se aplica al borde izquierdo (vertical-rl) o derecho (vertical-lr).

Ejemplo con modo de escritura vertical:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento-vertical {
    width: 150px;
    height: 200px;
    border: 1px solid gray;
    writing-mode: vertical-rl; /* Texto de arriba a abajo, bloques de derecha a izquierda */
    border-block: 3px solid purple; /* Ahora el borde púrpura estará a la derecha (inicio) y a la izquierda (fin) */
  }

  .elemento-horizontal {
    width: 200px;
    height: 100px;
    border: 1px solid gray;
    border-block: 3px solid green; /* El borde verde estará arriba (inicio) y abajo (fin) */
  }
</style>
</head>
<body>

  <div class="elemento-vertical">Texto vertical</div>
  <div class="elemento-horizontal">Texto horizontal</div>

</body>
</html>

En este ejemplo, el borde púrpura del elemento vertical aparecerá en los lados derecho e izquierdo, mientras que el borde verde del elemento horizontal aparecerá en los lados superior e inferior.

Relación con border-inline

De manera similar a border-block, existe la propiedad border-inline que se utiliza para establecer los bordes en las direcciones de inicio y fin de la línea (horizontalmente en la mayoría de los casos).

  • border-inline-start: Corresponde al borde izquierdo en modo horizontal y al borde superior en modo vertical (para vertical-lr).
  • border-inline-end: Corresponde al borde derecho en modo horizontal y al borde inferior en modo vertical (para vertical-lr).

Casos de Uso Comunes

  • Diseños que necesitan ser compatibles con diferentes modos de escritura: Utilizar border-block asegura que los bordes importantes para la estructura del bloque se apliquen correctamente independientemente de la orientación del texto.
  • Componentes reutilizables: Crear componentes que funcionen bien en diferentes contextos de diseño y con diferentes idiomas.
  • Diseños flexibles y adaptativos: Simplificar la creación de diseños que se ajustan a las necesidades de la internacionalización.

Compatibilidad del Navegador

Las propiedades lógicas como border-block tienen buena compatibilidad con los navegadores modernos. Sin embargo, para asegurar la compatibilidad con navegadores más antiguos, es posible que necesites usar las propiedades físicas (border-top, border-bottom) como alternativa o en conjunto.

Consideraciones

  • Al igual que con la propiedad border, el ancho del borde establecido con border-block afectará el tamaño total del elemento según el modelo de caja CSS.
  • Si solo estás trabajando con un modo de escritura horizontal y no necesitas la flexibilidad de las propiedades lógicas, puedes seguir utilizando border-top y border-bottom.
  • Las propiedades lógicas son especialmente útiles en proyectos que requieren soporte para múltiples idiomas con diferentes modos de escritura.

Ejemplo Práctico

Considera un diseño de lista donde quieres tener una línea divisoria visual entre los elementos de la lista. Usando border-block, puedes asegurar que esta línea divisoria siempre aparezca entre los bloques de la lista, ya sea que la lista se muestre horizontal o verticalmente (aunque las listas suelen ser verticales en la mayoría de los casos).

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  ul {
    list-style: none;
    padding: 0;
  }

  li {
    padding: 10px;
    border-block-end: 1px solid #eee; /* Añade una línea divisoria al final de cada bloque (típicamente abajo) */
  }

  li:last-child {
    border-block-end: none; /* Elimina la línea del último elemento */
  }

  /* Ejemplo con modo de escritura vertical (solo para ilustración) */
  .lista-vertical {
    writing-mode: vertical-rl;
  }

  .lista-vertical li {
    border-block-end: 1px solid #eee; /* Ahora la línea estará a la izquierda */
  }
</style>
</head>
<body>

  <h2>Lista Horizontal (predeterminado)</h2>
  <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
  </ul>

  <h2>Lista Vertical (ejemplo ilustrativo)</h2>
  <ul class="lista-vertical">
    <li>Elemento A</li>
    <li>Elemento B</li>
    <li>Elemento C</li>
  </ul>

</body>
</html>

En este ejemplo, la propiedad border-block-end se utiliza para agregar una línea divisoria al final de cada elemento de la lista. En la lista horizontal, esto es una línea en la parte inferior. En la lista vertical (solo como ejemplo), esta línea aparecerá en el lado izquierdo de cada elemento.

Conclusión

La propiedad border-block es una herramienta valiosa para crear diseños web más flexibles y preparados para la internacionalización. Al enfocarte en la dirección del flujo del bloque en lugar de las direcciones físicas, puedes simplificar la creación de interfaces de usuario que se adaptan a diferentes modos de escritura de manera más intuitiva. ¡Experimenta con border-block y otras propiedades lógicas para llevar tus habilidades de diseño web al siguiente nivel!