La Propiedad BORDER-BLOCK-START

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

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

Sintaxis Básica

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

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

Donde:

  • <ancho>: Especifica el grosor del borde. Puede ser una palabra clave (thin, medium, thick) o un valor en unidades de medida (píxeles px, ems em, etc.).
  • <estilo>: Define la apariencia del borde. Hay varios estilos disponibles (como solid, dashed, dotted, etc.).
  • <color>: Establece el color del borde. Puede ser un nombre de color (red, blue), un valor hexadecimal (#FF0000), un valor RGB (rgb(255, 0, 0)), etc.

Al igual que con la propiedad border, el orden de los valores no importa.

Propiedades Individuales de border-block-start

La propiedad border-block-start es una abreviatura de las siguientes propiedades lógicas individuales:

  • border-block-start-width: Establece el ancho del borde al inicio del bloque.
  • border-block-start-style: Establece el estilo del borde al inicio del bloque.
  • border-block-start-color: Establece el color del borde al inicio del bloque.

Valores para la Propiedad border-block-start

Los valores que puedes usar para <ancho>, <estilo> y <color> son los mismos que se utilizan para las propiedades de borde individuales correspondientes.

Ejemplos:

CSS
 
.borde-inicio-bloque-solido {
  border-block-start: 2px solid black;
}

.borde-inicio-bloque-punteado {
  border-block-start: thin dotted blue;
}

.borde-inicio-bloque-grueso-rojo {
  border-block-start: thick dashed red;
}

.borde-inicio-bloque-con-unidades {
  border-block-start: 5px solid #336699;
}

Comportamiento en Diferentes Modos de Escritura

La utilidad de border-block-start se hace evidente al considerar diferentes modos de escritura:

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

    • border-block-start se aplica al borde superior del elemento.

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

    • border-block-start se aplica al borde derecho del elemento.

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

    • border-block-start se aplica al 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: 3px solid purple; /* El borde 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-start: 3px solid orange; /* El borde naranja estará en el lado izquierdo */
  }

  .elemento-horizontal {
    width: 200px;
    height: 100px;
    border: 1px solid gray; /* Borde base para ver la estructura */
    border-block-start: 3px solid green; /* El borde 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, verás cómo border-block-start se aplica a diferentes bordes físicos dependiendo del modo de escritura.

Relación con border-block-end

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

Relación con border-inline-start y border-inline-end

Para los bordes en la dimensión en línea (que corresponden a los bordes izquierdo y derecho en modo horizontal), se utilizan las propiedades border-inline-start y border-inline-end.

Casos de Uso Comunes

  • Crear encabezados o separadores visuales consistentes: Usar border-block-start para asegurar que haya una línea divisoria al inicio de un bloque, independientemente de la orientación del texto.
  • Estilizar listas o elementos apilados: Aplicar un borde al inicio de cada elemento para crear una separación visual clara.
  • Diseños que necesitan ser compatibles con diferentes modos de escritura: Utilizar propiedades lógicas como border-block-start facilita la adaptación a idiomas con diferentes flujos de texto.

Compatibilidad del Navegador

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

Consideraciones

  • Recuerda que border-block-start es una propiedad abreviada. Si necesitas controlar individualmente el ancho, el estilo o el color, puedes usar las propiedades border-block-start-width, border-block-start-style y border-block-start-color.
  • Asegúrate de que también se haya establecido un border-block-start-style (con un valor diferente a none o hidden) para que el borde sea 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.

Ejemplo Práctico

Considera una sección de contenido donde quieres una línea divisoria en la parte superior:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .seccion {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc; /* Borde general para ver la estructura */
  }

  .con-borde-superior {
    border-block-start: 3px solid red; /* Línea roja en la parte superior del bloque */
  }

  /* Ejemplo con modo de escritura vertical (solo para ilustración) */
  .seccion-vertical {
    writing-mode: vertical-rl;
    height: 150px;
  }
</style>
</head>
<body>

  <div class="seccion">
    Contenido de la sección sin borde superior lógico.
  </div>

  <div class="seccion con-borde-superior">
    Contenido de la sección con un borde rojo al inicio del bloque (arriba en este caso).
  </div>

  <div class="seccion con-borde-superior seccion-vertical">
    Contenido de la sección con un borde rojo al inicio del bloque (a la derecha en este caso).
  </div>

</body>
</html>

En este ejemplo, border-block-start se utiliza para agregar una línea roja al inicio del bloque de la sección. En el caso horizontal, es una línea superior, y en el caso vertical (RL), es una línea a la derecha.

Conclusión

La propiedad border-block-start es una herramienta útil para crear bordes que se adaptan al flujo del contenido en diferentes modos de escritura. Al entender su comportamiento lógico, puedes diseñar interfaces de usuario más flexibles y preparadas para la internacionalización. ¡Experimenta con border-block-start y otras propiedades lógicas para mejorar tus habilidades de diseño web!