La Propiedad BORDER-BLOCK-END-COLOR

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

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

Sintaxis Básica

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

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

Donde <color> es el color que deseas aplicar al borde al final del bloque. Puedes usar cualquiera de los formatos de color CSS válidos.

Valores de la Propiedad border-block-end-color

Puedes usar los siguientes tipos de valores para especificar el color:

  • Nombres de colores: (red, blue, green, orange, etc.)
  • Valores hexadecimales: (#FF0000, #00FF00, #0000FF, etc.)
  • Valores RGB: (rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255), etc.)
  • Valores RGBA: (rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.7), etc.)
  • Valores HSL: (hsl(0, 100%, 50%), hsl(120, 100%, 50%), etc.)
  • Valores HSLA: (hsla(0, 100%, 50%, 0.5), hsla(120, 100%, 50%, 0.7), etc.)
  • transparent: Para hacer el color del borde transparente.

Comportamiento en Diferentes Modos de Escritura

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

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

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

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

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

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

    • border-block-end-color se aplica al color 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 color sea visible */
    border-block-end-color: purple; /* El color 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-style: solid; /* Necesitamos un estilo para que el color sea visible */
    border-block-end-color: orange; /* El color naranja 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 color sea visible */
    border-block-end-color: green; /* El color 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, el borde izquierdo del elemento vertical (RL) será de color púrpura, el borde derecho del elemento vertical (LR) será naranja, y el borde inferior del elemento horizontal será verde.

Relación con border-block-end-style y border-block-end-width

Es crucial recordar que border-block-end-color solo establece el color 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-width (el grosor del borde). Si no se establece un estilo de borde, no se mostrará ningún borde, sin importar el color o el ancho que definas.

Ejemplo:

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

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

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

</body>
</html>

Relación con border-block-start-color

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

Relación con border-inline-end-color

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

Casos de Uso Comunes

  • Estilizar consistentemente el color del borde inferior (o equivalente lógico): Asegurar que el borde al final del flujo del bloque tenga un color específico en diferentes contextos.
  • Crear temas visuales: Definir colores de borde que se mantengan consistentes a través de diferentes orientaciones de texto.
  • Resaltar la separación entre bloques de contenido: Utilizar un color específico para el borde que marca el final de un bloque.

Compatibilidad del Navegador

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

Consideraciones

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