La Propiedad BORDER-BLOCK-START-STYLE

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

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

Sintaxis Básica

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

CSS 

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

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

Valores de la Propiedad `border-block-start-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-start-style depende del modo de escritura del elemento:

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

  .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-start-width: 5px; /* Necesitamos un ancho para que el estilo sea visible */
    border-block-start-color: orange; /* También necesitamos un color */
    border-block-start-style: dotted; /* El estilo dotted estará en el lado izquierdo */
  }

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

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

Es fundamental recordar que border-block-start-style solo establece el estilo del borde. Para que el borde sea visible, también debes definir un border-block-start-width (el grosor del borde) y un border-block-start-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-start-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-start-width: 5px;
    border-block-start-color: blue;
    border-block-start-style: dotted; /* Este estilo de puntos azul se mostrará en la parte superior */
  }
</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 superior.</div>

</body>
</html>

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

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

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

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

Casos de Uso Comunes

Estilizar consistentemente el borde superior (o equivalente lógico): Asegurar que el borde al inicio del flujo del bloque tenga un estilo específico en diferentes contextos.
Crear encabezados o 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-start-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-top-style como alternativa o en conjunto.

Consideraciones

Recuerda que border-block-start-style solo establece el estilo. Necesitas usar border-block-start-width y border-block-start-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-top-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-start-style te permite controlar fácilmente el estilo 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-width y border-block-start-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!