La Propiedad BORDER-BLOCK-START-WIDTH

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

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

Sintaxis Básica

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

CSS 

selector {
  border-block-start-width: <ancho>;
}

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

Valores de la Propiedad `border-block-start-width`

Puedes usar los siguientes tipos de valores para especificar el ancho del borde:

Palabras clave:
- thin: Un borde delgado.
- medium: Un borde de grosor medio (valor predeterminado).
- thick: Un borde grueso.
Unidades de medida: Puedes usar cualquier unidad de longitud CSS, como píxeles (px), ems (em), rems (rem), etc.

Comportamiento en Diferentes Modos de Escritura

El efecto de border-block-start-width depende del modo de escritura del elemento:

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

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

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

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

Ejemplo:

HTML 

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

  .elemento-completo {
    width: 200px;
    height: 100px;
    border: 1px solid gray;
    border-block-start-style: dashed;
    border-block-start-color: blue;
    border-block-start-width: thick; /* Este borde azul punteado y grueso se mostrará en la parte superior */
  }
</style>
</head>
<body>

  <div class="elemento-sin-estilo">Este elemento no mostrará un borde porque falta el estilo.</div>
  <div class="elemento-completo">Este elemento mostrará un borde azul punteado y grueso en la parte superior.</div>

</body>
</html>

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

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

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

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

Casos de Uso Comunes

Estilizar consistentemente el grosor del borde superior (o equivalente lógico): Asegurar que el borde al inicio del flujo del bloque tenga un ancho específico en diferentes contextos.
Crear encabezados o separadores visuales con un grosor definido: Utilizar anchos específicos para indicar la importancia de la 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-width 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-width como alternativa o en conjunto.

Consideraciones

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