Propiedad column-rule

La propiedad column-rule establece un borde entre las columnas en texto multicolumna. En términos de valores aceptados, coincide con la propiedad border.

Ejemplo . Tipo solid

En este ejemplo, el texto se dividirá en 3 columnas con bordes entre columnas en forma de línea continua de 1px de grosor (la distancia entre las columnas se formará automáticamente, ya que se estableció column-gap con el valor normal):

html<div id="elem">
  some long text
</div>

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: normal;
  text-align: justify;
}

Результат:

Ejemplo . Influencia de column-gap

En este ejemplo, el texto se dividirá en 3 columnas con un espacio entre ellas de 50px. El borde pasará por la mitad del espacio (a la derecha y a la izquierda del borde habrá 25px):

html<div id="elem">
  some long text
</div>

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

Véase también