La Propiedad BORDER-BLOCK-END-WIDTH

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

La propiedad border-block-end-width en CSS se utiliza para establecer el ancho del 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. Esto significa que el borde al que se aplica este ancho dependerá 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-width afectará el ancho del borde inferior del elemento. Sin embargo, en modos de escritura verticales, podría afectar el ancho del borde izquierdo o derecho.

Sintaxis Básica

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

CSS 

selector {
  border-block-end-width: <ancho>;
}

Donde <ancho> es el grosor que deseas aplicar al borde al final del bloque.

Valores de la Propiedad `border-block-end-width`

Puedes usar los siguientes tipos de valores para especificar el ancho del borde:

Palabras clave:
- thin: Un borde delgado.
- medium: Un borde de grosor medio (valor predeterminado).
- thick: Un borde grueso.
Unidades de medida: Puedes usar cualquier unidad de longitud CSS, como píxeles (px), ems (em), rems (rem), etc.

Comportamiento en Diferentes Modos de Escritura

El efecto de border-block-end-width depende del modo de escritura del elemento:

Modo de Escritura Horizontal (horizontal-tb - predeterminado):
- border-block-end-width se aplica al ancho del borde inferior del elemento.
Modo de Escritura Vertical (vertical-rl - de derecha a izquierda):
- border-block-end-width se aplica al ancho del borde izquierdo del elemento.
Modo de Escritura Vertical (vertical-lr - de izquierda a derecha):
- border-block-end-width se aplica al ancho del 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-style: solid; /* Necesitamos un estilo para que el ancho sea visible */
    border-block-end-color: purple; /* También necesitamos un color */
    border-block-end-width: 5px; /* El ancho de 5px 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-style: solid; /* Necesitamos un estilo para que el ancho sea visible */
    border-block-end-color: orange; /* También necesitamos un color */
    border-block-end-width: thick; /* El ancho grueso estará en el lado derecho */
  }

  .elemento-horizontal {
    width: 200px;
    height: 100px;
    border: 1px solid gray; /* Borde base para ver la estructura */
    border-block-style: solid; /* Necesitamos un estilo para que el ancho sea visible */
    border-block-end-color: green; /* También necesitamos un color */
    border-block-end-width: 3px; /* El ancho de 3px 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, el borde izquierdo del elemento vertical (RL) tendrá un ancho de 5 píxeles, el borde derecho del elemento vertical (LR) será grueso, y el borde inferior del elemento horizontal tendrá un ancho de 3 píxeles.

Relación con `border-block-end-color` y `border-block-end-style`

Es importante recordar que border-block-end-width solo establece el ancho del borde. Para que el borde sea visible, también debes definir un border-block-end-style (como solid, dashed, dotted) y un border-block-end-color. Si no se establece un estilo de borde, no se mostrará ningún borde, sin importar el ancho o el color que definas.

Ejemplo:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento-sin-estilo {
    width: 200px;
    height: 100px;
    border: 1px solid gray;
    border-block-end-width: 5px; /* Este ancho no se mostrará porque falta el estilo */
  }

  .elemento-completo {
    width: 200px;
    height: 100px;
    border: 1px solid gray;
    border-block-end-style: dashed;
    border-block-end-color: blue;
    border-block-end-width: thick; /* Este borde azul punteado y grueso se mostrará en la parte inferior */
  }
</style>
</head>
<body>

  <div class="elemento-sin-estilo">Este elemento no mostrará un borde porque falta el estilo.</div>
  <div class="elemento-completo">Este elemento mostrará un borde azul punteado y grueso en la parte inferior.</div>

</body>
</html>

Relación con `border-block-start-width`

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

Relación con `border-inline-end-width`

Para establecer el ancho del borde al final de la dimensión en línea (típicamente el ancho del borde derecho en modo horizontal), se utiliza la propiedad border-inline-end-width.

Casos de Uso Comunes

Estilizar consistentemente el grosor del borde inferior (o equivalente lógico): Asegurar que el borde al final del flujo del bloque tenga un ancho específico en diferentes contextos.
Crear separadores visuales con un grosor definido: Utilizar anchos específicos para indicar la importancia de la separación entre elementos.
Diseños que necesitan ser compatibles con diferentes modos de escritura: Utilizar propiedades lógicas facilita la adaptación a idiomas con diferentes flujos de texto.

Compatibilidad del Navegador

Las propiedades lógicas como border-block-end-width 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-width como alternativa o en conjunto.

Consideraciones

Recuerda que border-block-end-width solo establece el ancho. Necesitas usar border-block-end-style y border-block-end-color para definir el estilo y el color del borde.
Si el estilo no está establecido, el ancho no será 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-width.
Las propiedades lógicas son especialmente útiles en proyectos que requieren soporte para múltiples idiomas con diferentes modos de escritura.

Conclusión

La propiedad border-block-end-width te permite controlar fácilmente el grosor del borde al final de la dimensión del bloque de tus elementos CSS, facilitando la creación de diseños adaptables y consistentes en diferentes contextos de escritura. Al combinarla con border-block-end-style y border-block-end-color, tienes un control completo sobre la apariencia de este borde lógico. ¡Experimenta con diferentes anchos y modos de escritura para apreciar su utilidad!