La Propiedad BORDER-BLOCK-WIDTH

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

La propiedad border-block-width en CSS se utiliza para establecer el ancho de los bordes en las direcciones de inicio y fin 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 los bordes a los que se aplica este ancho (superior e inferior en la mayoría de los casos, pero izquierdo y derecho en modos de escritura verticales) dependen del modo de escritura y la dirección del texto del elemento.

Sintaxis Básica

La propiedad border-block-width puede aceptar uno o dos valores:

CSS
 
selector {
  border-block-width: <un-ancho>; /* Un valor para ambos bordes */
}

selector {
  border-block-width: <ancho-inicio> <ancho-fin>; /* Dos valores para anchos de inicio y fin */
}

Donde <un-ancho>, <ancho-inicio> y <ancho-fin> pueden ser:

  • 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.

Un Valor

Si se especifica un solo valor para border-block-width, este valor se aplicará tanto al ancho del borde al inicio del bloque como al ancho del borde al final del bloque.

Ejemplo:

CSS
 
.elemento-un-ancho {
  border-block-style: solid; /* Necesitamos un estilo para ver el ancho */
  border-block-color: black; /* También necesitamos un color */
  border-block-width: 3px; /* Borde de 3 píxeles en la parte superior e inferior (en modo horizontal) */
}

Dos Valores

Si se especifican dos valores, el primer valor se aplicará al ancho del borde al inicio del bloque y el segundo valor al ancho del borde al final del bloque.

Ejemplo:

CSS
 
.elemento-dos-anchos {
  border-block-style: solid; /* Necesitamos un estilo para ver el ancho */
  border-block-color: red; /* También necesitamos un color */
  border-block-width: 2px 5px; /* Borde de 2px al inicio y 5px al final (en modo horizontal) */
}

Comportamiento en Diferentes Modos de Escritura

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

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

    • El primer valor (o el único valor) se aplica al ancho del borde superior.
    • El segundo valor (si se proporciona) se aplica al ancho del borde inferior.

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

    • El primer valor (o el único valor) se aplica al ancho del borde derecho.
    • El segundo valor (si se proporciona) se aplica al ancho del borde izquierdo.

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

    • El primer valor (o el único valor) se aplica al ancho del borde izquierdo.
    • El segundo valor (si se proporciona) se aplica al ancho del borde derecho.

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;
    border-block-color: purple;
    border-block-width: thick thin; /* Ancho grueso a la derecha (inicio), delgado a la izquierda (fin) */
  }

  .elemento-horizontal {
    width: 200px;
    height: 100px;
    border: 1px solid gray; /* Borde base para ver la estructura */
    border-block-style: solid;
    border-block-color: green;
    border-block-width: medium; /* Ancho medio arriba y abajo */
  }
</style>
</head>
<body>

  <div class="elemento-vertical-rl">Texto vertical (RL)</div>
  <div class="elemento-horizontal">Texto horizontal</div>

</body>
</html>

En este ejemplo, el elemento vertical tendrá un borde grueso en el lado derecho y un borde delgado en el lado izquierdo, mientras que el elemento horizontal tendrá un borde de ancho medio en la parte superior e inferior.

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

Es importante recordar que border-block-width solo establece el ancho de los bordes. Para que los bordes sean visibles, también debes definir un border-block-style (como solid, dashed, dotted) y un border-block-color. Si el estilo de borde no está establecido (o está en none o hidden), no se mostrará ningún borde, independientemente del ancho o el color que definas.

Relación con border-inline-width

La propiedad border-inline-width es la contraparte de border-block-width y se utiliza para establecer el ancho de los bordes en las direcciones de inicio y fin de la línea (izquierda y derecha en la mayoría de los casos).

Casos de Uso Comunes

  • Estilizar consistentemente el grosor de los bordes superior e inferior (o equivalentes lógicos): Asegurar que los bordes al inicio y al final del flujo del bloque tengan el mismo ancho o anchos específicos.
  • Crear separadores visuales con un grosor definido: Utilizar diferentes anchos 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-width 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-width y border-bottom-width como alternativa o en conjunto.

Consideraciones

  • Recuerda que border-block-width solo establece el ancho. Necesitas usar border-block-style y border-block-color para definir el estilo y el color de los bordes.
  • 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 y border-bottom-width.
  • Las propiedades lógicas son especialmente útiles en proyectos que requieren soporte para múltiples idiomas con diferentes modos de escritura.

Ejemplo Práctico

Considera un elemento de bloque al que quieres dar un ancho de borde diferente en la parte superior e inferior:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento-ancho-decorado {
    width: 300px;
    padding: 20px;
    margin: 20px;
    border: 1px solid #ccc; /* Borde base para ver la estructura */
    border-block-style: solid;
    border-block-color: blue;
    border-block-width: thick thin; /* Borde superior grueso, borde inferior delgado */
  }
</style>
</head>
<body>

  <div class="elemento-ancho-decorado">
    Este es un elemento con un borde superior grueso y un borde inferior delgado.
  </div>

</body>
</html>

En este ejemplo, el elemento tendrá un borde grueso en la parte superior y un borde delgado en la parte inferior.

Conclusión

La propiedad border-block-width te permite controlar fácilmente el ancho de los bordes al inicio y 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-style y border-block-color, tienes un control completo sobre la apariencia de estos bordes lógicos. ¡Experimenta con diferentes anchos y modos de escritura para apreciar su utilidad!