La Propiedad BORDER-BLOCK-END

La propiedad border-block-end en CSS se utiliza para establecer el borde en el final de la dimensión del bloque de un elemento.

La propiedad border-block-end en CSS se utiliza para establecer el borde en el final de la dimensión del bloque de un elemento. Al igual que otras propiedades con el prefijo block-, forma parte de las Propiedades Lógicas de CSS, lo que significa que su efecto físico (superior, inferior, izquierda o derecha) depende del modo de escritura y la dirección del texto del elemento.

En la mayoría de los idiomas (como el español), la dirección del bloque es vertical y fluye de arriba hacia abajo. En este contexto, border-block-end corresponde al borde inferior del elemento. Sin embargo, en modos de escritura verticales, podría corresponder al borde izquierdo o derecho.

Sintaxis Básica

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

CSS
 
selector {
  border-block-end: <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-end

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

  • border-block-end-width: Establece el ancho del borde al final del bloque.
  • border-block-end-style: Establece el estilo del borde al final del bloque.
  • border-block-end-color: Establece el color del borde al final del bloque.

Valores para la Propiedad border-block-end

Los valores que puedes usar para <ancho>, <estilo> y <color> son los mismos que se utilizan para las propiedades de borde individuales correspondientes.

Ejemplos:

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

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

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

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

Comportamiento en Diferentes Modos de Escritura

La utilidad de border-block-end se hace evidente al considerar diferentes modos de escritura:

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

    • border-block-end se aplica al borde inferior del elemento.

  • Modo de Escritura Vertical (vertical-rl - de derecha a izquierda):

    • border-block-end se aplica al borde izquierdo del elemento.

  • Modo de Escritura Vertical (vertical-lr - de izquierda a derecha):

    • border-block-end se aplica al borde derecho del elemento.

Ejemplo con modo de escritura vertical:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento-vertical-rl {
    width: 150px;
    height: 200px;
    border: 1px solid gray; /* Borde base para ver la estructura */
    writing-mode: vertical-rl; /* Texto vertical de derecha a izquierda */
    border-block-end: 3px solid purple; /* El borde púrpura estará en el lado izquierdo */
  }

  .elemento-vertical-lr {
    width: 150px;
    height: 200px;
    border: 1px solid gray; /* Borde base para ver la estructura */
    writing-mode: vertical-lr; /* Texto vertical de izquierda a derecha */
    border-block-end: 3px solid orange; /* El borde naranja estará en el lado derecho */
  }

  .elemento-horizontal {
    width: 200px;
    height: 100px;
    border: 1px solid gray; /* Borde base para ver la estructura */
    border-block-end: 3px solid green; /* El borde verde estará en la parte inferior */
  }
</style>
</head>
<body>

  <div class="elemento-vertical-rl">Texto vertical (RL)</div>
  <div class="elemento-vertical-lr">Texto vertical (LR)</div>
  <div class="elemento-horizontal">Texto horizontal</div>

</body>
</html>

En este ejemplo, verás cómo border-block-end se aplica a diferentes bordes físicos dependiendo del modo de escritura.

Relación con border-block-start

La propiedad border-block-start es la contraparte de border-block-end y se aplica al borde al inicio de la dimensión del bloque (típicamente el borde superior en modo horizontal).

Relación con border-inline-start y border-inline-end

Para los bordes en la dimensión en línea (que corresponden a los bordes izquierdo y derecho en modo horizontal), se utilizan las propiedades border-inline-start y border-inline-end.

Casos de Uso Comunes

  • Crear separadores consistentes entre bloques de contenido: Usar border-block-end para asegurar que haya una línea divisoria al final de cada bloque, independientemente de la orientación del texto.
  • Estilizar listas o elementos apilados: Aplicar un borde al final de cada elemento para crear una separación visual clara.
  • Diseños que necesitan ser compatibles con diferentes modos de escritura: Utilizar propiedades lógicas como border-block-end facilita la adaptación a idiomas con diferentes flujos de texto.

Compatibilidad del Navegador

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

Consideraciones

  • Recuerda que border-block-end es una propiedad abreviada. Si necesitas controlar individualmente el ancho, el estilo o el color, puedes usar las propiedades border-block-end-width, border-block-end-style y border-block-end-color.
  • Asegúrate de que también se haya establecido un border-block-end-style (con un valor diferente a none o hidden) para que el borde sea visible.
  • 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-bottom.

Ejemplo Práctico

Considera una lista de elementos donde quieres una línea divisoria después de cada elemento:

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

  li {
    padding: 10px;
    border-block-end: 1px solid #ccc; /* Línea gris al final de cada bloque */
  }

  li:last-child {
    border-block-end: none; /* Eliminar la línea del último elemento */
  }
</style>
</head>
<body>

  <h2>Lista de Tareas</h2>
  <ul>
    <li>Comprar leche</li>
    <li>Lavar la ropa</li>
    <li>Pagar las cuentas</li>
    <li>Leer un libro</li>
  </ul>

</body>
</html>

En este ejemplo, border-block-end se utiliza para crear una línea divisoria después de cada elemento de la lista, lo que en este caso (modo de escritura horizontal) corresponde a una línea en la parte inferior de cada li.

Conclusión

La propiedad border-block-end es una herramienta útil para crear bordes que se adaptan al flujo del contenido en diferentes modos de escritura. Al entender su comportamiento lógico, puedes diseñar interfaces de usuario más flexibles y preparadas para la internacionalización. ¡Experimenta con border-block-end y otras propiedades lógicas para mejorar tus habilidades de diseño web!