La Propiedad BORDER-BLOCK-COLOR

La propiedad border-block-color en CSS se utiliza para establecer el color de los bordes en las direcciones de inicio y fin del bloque de un elemento.

La propiedad border-block-color en CSS se utiliza para establecer el color de los bordes en las direcciones de inicio y fin del bloque de un elemento. Al igual que border-block, esta propiedad es parte de las Propiedades Lógicas de CSS, lo que la hace ideal para diseñar interfaces que se adaptan a diferentes modos de escritura (horizontal, vertical) y direcciones del texto.

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

Sintaxis Básica

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

CSS 

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

Donde <color> es el color que deseas aplicar a los bordes de inicio y fin del bloque. Puedes usar cualquiera de los formatos de color CSS válidos.

Valores de la Propiedad `border-block-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 borde transparente.

Propiedades Individuales de `border-block-color`

La propiedad border-block-color establece el color de las siguientes propiedades lógicas individuales:

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

Comportamiento en Diferentes Modos de Escritura

Al igual que con otras propiedades lógicas, el efecto de border-block-color depende del modo de escritura del elemento:

Modo de Escritura Horizontal (horizontal-tb - predeterminado):
- border-block-start-color se aplica al color del borde superior.
- border-block-end-color se aplica al color del borde inferior.
Modo de Escritura Vertical (vertical-rl o vertical-lr):
- border-block-start-color se aplica al color del borde derecho (vertical-rl) o izquierdo (vertical-lr).
- border-block-end-color se aplica al color del 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: 2px 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-color: purple; /* El color púrpura estará a la derecha (inicio) y a la izquierda (fin) */
  }

  .elemento-horizontal {
    width: 200px;
    height: 100px;
    border: 2px solid gray; /* Borde base para ver la estructura */
    border-block-style: solid; /* Necesitamos un estilo para que el color sea visible */
    border-block-color: green; /* El color 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 aparecerá en los lados derecho e izquierdo del elemento vertical, mientras que el borde verde aparecerá en los lados superior e inferior del elemento horizontal.

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

Es importante recordar que para que el color del borde sea visible, también debes establecer un border-block-style y un border-block-width. Si no se establece un estilo de borde, no se mostrará ningún borde, independientemente del color o el ancho que definas.

Ejemplo:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento-con-color {
    width: 200px;
    height: 100px;
    border: 1px solid gray;
    border-block-color: orange; /* El color no será visible sin un estilo y ancho */
  }

  .elemento-completo {
    width: 200px;
    height: 100px;
    border: 1px solid gray;
    border-block-width: 5px;
    border-block-style: dashed;
    border-block-color: blue; /* Ahora el borde azul punteado será visible */
  }
</style>
</head>
<body>

  <div class="elemento-con-color">Este elemento no mostrará un borde naranja porque falta el estilo y el ancho del bloque.</div>
  <div class="elemento-completo">Este elemento mostrará un borde azul punteado en la parte superior e inferior.</div>

</body>
</html>

Relación con `border-inline-color`

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

Casos de Uso Comunes

Estilizar consistentemente los bordes de inicio y fin del bloque: Asegurar que los bordes superior e inferior (o izquierdo y derecho en modos verticales) tengan el mismo color.
Crear temas visuales: Definir colores de borde que se mantengan consistentes a través de diferentes orientaciones de texto.
Simplificar el código para diseños internacionales: Utilizar propiedades lógicas para evitar tener que escribir reglas separadas para diferentes modos de escritura.

Compatibilidad del Navegador

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

Consideraciones

Recuerda que border-block-color solo establece el color. Necesitas usar border-block-style y border-block-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-top-color y 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-color te permite controlar fácilmente el color de los bordes en la direcció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-style y border-block-width, tienes un control completo sobre la apariencia de estos bordes lógicos. ¡Experimenta con diferentes colores y modos de escritura para apreciar su utilidad!