Propiedad CSS column-rule-style

La propiedad CSS column-rule-style establece el estilo de la línea (regla) trazada entre las columnas de un diseño multicolumna. La regla de columna funciona igual que un border: se ubica en el column-gap y separa visualmente las columnas adyacentes, y acepta el mismo conjunto de estilos de línea que un borde.

Esta propiedad es una de las propiedades CSS3.

column-rule-style es una de las tres subpropiedades que conforman la abreviatura column-rule, junto con column-rule-width y column-rule-color. Por sí sola solo controla la forma de la línea; generalmente se combinan las tres para obtener un resultado visible.

Cuándo usarla

Utiliza column-rule-style cuando dividas texto en varias columnas y desees un separador visible, como en un diseño de periódico o revista. Dado que la regla vive dentro del espacio entre columnas, no ocupa espacio adicional y nunca desplaza el contenido, por lo que es una forma limpia de separar columnas sin modificar el ancho del diseño.

Para usar esta propiedad, primero debes convertir un elemento en un contenedor multicolumna con las propiedades columns o column-count; la regla no tiene nada entre qué dibujarse si solo hay una columna.

Aspectos a tener en cuenta

La regla es invisible por defecto porque el estilo inicial es none. Incluso después de definir un estilo, la regla no se renderizará a menos que column-rule-width sea mayor que 0 (el ancho predeterminado es medium, que generalmente es visible).
Los estilos 3D — groove, ridge, inset y outset — dependen del color de la regla. Con un color muy claro o transparent, el efecto 3D puede ser difícil de apreciar; establece column-rule-color de forma explícita.
hidden y none no dibujan nada, pero hidden sigue reservando un ancho en el espacio, mientras que none colapsa a un ancho cero; la diferencia solo importa cuando otros estilos de regla se encuentran con él.

La propiedad column-rule-style tiene los siguientes valores:

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Valor inicial	none
Se aplica a	Elementos multicolumna.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.columnRuleStyle = "dashed" ;

Sintaxis

Sintaxis de la propiedad CSS column-rule-style

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Ejemplo de la propiedad column-rule-style:

Ejemplo de la propiedad CSS column-rule-style con el valor dotted

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule-style property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

En el siguiente ejemplo, la regla entre columnas es double. Aquí la regla recibe un color con la propiedad column-rule-color y un grosor explícito con column-rule-width, por lo que la línea doble es claramente visible.

Ejemplo de la propiedad column-rule-style con el valor "double":

Ejemplo de la propiedad CSS column-rule-style con el valor double

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: double;
        column-rule-color: #1c87c9;
        column-rule-width: 5px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-style property example</h1>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
none	No se define ninguna regla. Este es el valor predeterminado.
hidden	La regla está oculta.
dotted	La regla es punteada.
dashed	La regla es discontinua.
solid	La regla es sólida.
double	La regla es doble.
groove	La regla es un surco 3D. Los valores de ancho y color definen el efecto.
ridge	La regla es un relieve 3D. Los valores de ancho y color definen el efecto.
inset	La regla es un hundido 3D. Los valores de ancho y color definen el efecto.
outset	La regla es un resalte 3D. Los valores de ancho y color definen el efecto.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

column-rule — abreviatura que establece el ancho, estilo y color a la vez.
column-rule-width — grosor de la regla.
column-rule-color — color de la regla.
column-gap — el espacio interior donde se dibuja la regla.
column-count y columns — crean el diseño multicolumna en primer lugar.

Práctica

¿Cuáles de las siguientes afirmaciones son verdaderas sobre la propiedad CSS column-rule-style?

La propiedad column-rule-style se usa para especificar el estilo de la regla entre columnas.El valor predeterminado de la propiedad column-rule-style es 'none'.La propiedad column-rule-style no puede usarse con la regla @media.Los valores de column-rule-style pueden replicar cualquier estilo de borde.La propiedad column-rule-style solo es aplicable al elemento `<div>`.