La Propiedad BORDER-BLOCK-END-STYLE

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

La propiedad border-block-end-style en CSS se utiliza para establecer el estilo 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 estilo 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-style afectará el estilo del borde inferior del elemento. Sin embargo, en modos de escritura verticales, podría afectar el estilo del borde izquierdo o derecho.

Sintaxis Básica

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

CSS 

selector {
  border-block-end-style: <estilo>;
}

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

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

Puedes usar los siguientes valores para especificar el estilo del borde:

none: No se muestra ningún borde. El ancho del borde es 0.
hidden: Similar a none, pero en conflictos de bordes de tabla, hidden tiene la prioridad más alta.
dotted: El borde se muestra como una serie de puntos.
dashed: El borde se muestra como una serie de guiones.
solid: El borde se muestra como una línea continua.
double: El borde se muestra como dos líneas sólidas paralelas. El ancho total es la suma del ancho de las dos líneas y el espacio entre ellas.
groove: El borde parece estar tallado en el lienzo. El efecto depende del color del borde.
ridge: El borde parece sobresalir del lienzo. El efecto también depende del color del borde.
inset: El contenido del elemento parece estar incrustado.
outset: El contenido del elemento parece sobresalir.

Comportamiento en Diferentes Modos de Escritura

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

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

  .elemento-vertical-lr {
    width: 150px;
    height: 200px;
    border: 2px solid gray; /* Borde base para ver la estructura */
    writing-mode: vertical-lr; /* Texto vertical de izquierda a derecha */
    border-block-end-width: 5px; /* Necesitamos un ancho para que el estilo sea visible */
    border-block-end-color: orange; /* También necesitamos un color */
    border-block-end-style: dotted; /* El estilo dotted estará en el lado derecho */
  }

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

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

Es fundamental recordar que border-block-end-style solo establece el estilo del borde. Para que el borde sea visible, también debes definir un border-block-end-width (el grosor del borde) y un border-block-end-color. Si el estilo se establece en none o hidden, no se mostrará ningún borde, independientemente del ancho o el color que definas.

Ejemplo:

HTML 

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

  .elemento-completo {
    width: 200px;
    height: 100px;
    border: 1px solid gray;
    border-block-end-width: 5px;
    border-block-end-color: blue;
    border-block-end-style: dotted; /* Este estilo de puntos azul se mostrará en la parte inferior */
  }
</style>
</head>
<body>

  <div class="elemento-sin-ancho-color">Este elemento no mostrará un borde de guiones porque falta el ancho y el color.</div>
  <div class="elemento-completo">Este elemento mostrará un borde de puntos azul en la parte inferior.</div>

</body>
</html>

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

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

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

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

Casos de Uso Comunes

Estilizar consistentemente el borde inferior (o equivalente lógico): Asegurar que el borde al final del flujo del bloque tenga un estilo específico en diferentes contextos.
Crear separadores visuales con estilos particulares: Utilizar estilos como dashed o dotted para indicar una 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-style 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-style como alternativa o en conjunto.

Consideraciones

Recuerda que border-block-end-style solo establece el estilo. Necesitas usar border-block-end-width y border-block-end-color para definir el ancho y el color del borde.
Si el estilo se establece en none o hidden, el borde no se mostrará.
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-style.
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-style te permite controlar fácilmente el estilo 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-width y border-block-end-color, tienes un control completo sobre la apariencia de este borde lógico. ¡Experimenta con diferentes estilos y modos de escritura para apreciar su utilidad!