La Propiedad BORDER-BLOCK-STYLE

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

La propiedad border-block-style en CSS se utiliza para establecer el estilo 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 estilo (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-style puede aceptar uno o dos valores:

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

selector {
  border-block-style: <estilo-inicio> <estilo-fin>; /* Dos valores para bordes de inicio y fin */
}

Donde <un-estilo>, <estilo-inicio> y <estilo-fin> son uno de los siguientes valores de estilo de 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.

Un Valor

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

Ejemplo:

CSS
 
.elemento-un-estilo {
  border-block-width: 5px; /* Necesitamos un ancho para ver el estilo */
  border-block-color: blue; /* También necesitamos un color */
  border-block-style: dashed; /* Borde de guiones en la parte superior e inferior (en modo horizontal) */
}

Dos Valores

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

Ejemplo:

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

Comportamiento en Diferentes Modos de Escritura

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

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

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

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

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

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

    • El primer valor (o el único valor) se aplica al estilo del borde izquierdo.
    • El segundo valor (si se proporciona) se aplica al estilo 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-width: 5px;
    border-block-color: purple;
    border-block-style: dashed dotted; /* Dashed a la derecha (inicio), dotted a la izquierda (fin) */
  }

  .elemento-horizontal {
    width: 200px;
    height: 100px;
    border: 1px solid gray; /* Borde base para ver la estructura */
    border-block-width: 5px;
    border-block-color: green;
    border-block-style: solid; /* Sólido 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 de guiones en el lado derecho y de puntos en el lado izquierdo, mientras que el elemento horizontal tendrá un borde sólido en la parte superior e inferior.

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

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

Relación con border-inline-style

La propiedad border-inline-style es la contraparte de border-block-style y se utiliza para establecer el estilo 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 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 estilo o estilos específicos.
  • Crear 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-style 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-style y border-bottom-style como alternativa o en conjunto.

Consideraciones

  • Recuerda que border-block-style solo establece el estilo. Necesitas usar border-block-width y border-block-color para definir el ancho y el color de los bordes.
  • Si el estilo se establece en none o hidden, los bordes no se mostrarán.
  • 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 y border-bottom-style.
  • 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 estilo de borde diferente en la parte superior e inferior:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento-decorado {
    width: 300px;
    padding: 20px;
    margin: 20px;
    border: 1px solid #ccc; /* Borde base para ver la estructura */
    border-block-width: 3px;
    border-block-color: purple;
    border-block-style: solid dashed; /* Borde superior sólido, borde inferior de guiones */
  }
</style>
</head>
<body>

  <div class="elemento-decorado">
    Este es un elemento con un borde superior sólido y un borde inferior de guiones.
  </div>

</body>
</html>

En este ejemplo, el elemento tendrá un borde sólido en la parte superior y un borde de guiones en la parte inferior.

Conclusión

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