La Propiedad BORDER-BLOCK-START-COLOR

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

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

Sintaxis Básica

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

CSS 

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

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

Valores de la Propiedad `border-block-start-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-start-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 del elemento.
Modo de Escritura Vertical (vertical-rl - de derecha a izquierda):
- border-block-start-color se aplica al color del borde derecho del elemento.
Modo de Escritura Vertical (vertical-lr - de izquierda a derecha):
- border-block-start-color se aplica al color del borde izquierdo 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-start-color: purple; /* El color púrpura estará en el lado derecho */
  }

  .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-start-color: orange; /* El color naranja estará en el lado izquierdo */
  }

  .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-start-color: green; /* El color verde estará en la parte superior */
  }
</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 derecho del elemento vertical (RL) será de color púrpura, el borde izquierdo del elemento vertical (LR) será naranja, y el borde superior del elemento horizontal será verde.

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

Es crucial recordar que border-block-start-color solo establece el color del borde. Para que el borde sea visible, también debes definir un border-block-start-style (como solid, dashed, dotted) y un border-block-start-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-start-color: red; /* Este color no se mostrará porque falta el estilo */
  }

  .elemento-con-estilo {
    width: 200px;
    height: 100px;
    border: 1px solid gray;
    border-block-start-width: 5px;
    border-block-start-style: dashed;
    border-block-start-color: blue; /* Este color azul punteado se mostrará en la parte superior */
  }
</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 superior.</div>

</body>
</html>

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

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

Relación con `border-inline-start-color`

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

Casos de Uso Comunes

Estilizar consistentemente el color del borde superior (o equivalente lógico): Asegurar que el borde al inicio 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 el inicio de un bloque de contenido: Utilizar un color específico para el borde que marca el comienzo de un bloque.

Compatibilidad del Navegador

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

Consideraciones

Recuerda que border-block-start-color solo establece el color. Necesitas usar border-block-start-style y border-block-start-width para definir el estilo y el ancho del borde.
Si el estilo no está establecido, el color 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-top-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-start-color te permite controlar fácilmente el color del borde al inicio 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-start-style y border-block-start-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!