Múltiples columnas y línea separadora (column-rule)

La propiedad column-rule establece el ancho, el estilo y el color de la línea dibujada entre columnas en un diseño de varias columnas.column-rule

Es una propiedad abreviada que establece los individuales column-rule-*propiedades en una sola declaración, conveniente: column-rule-width, column-rule-style, y column-rule-color.

Podemos configurar una línea separadora entre las columnas cuando utilizamos múltiples columnas. La sintaxis es la siguiente:

Elemento {
column-rule: grosor estilo color;
}

Valores

<'column-rule-width'>Establece el ancho de la regla entre columnas. El valor predeterminado es medio
<'column-rule-style'>Establece el estilo de la regla entre columnas. El valor predeterminado es ninguno
<'column-rule-color'>Establece el color de la regla entre columnas. El valor predeterminado es el color del elemento.

Con el siguiente ejemplo veamos los distintos valores de esta propiedad. Definimos una línea de un píxel, con trazo sólido de color rojo:

#recuadro1{ -moz-column-rule: 1px solid #f00;
-webkit-column-rule: 1px solid #f00;
column-rule: 1px solid #f00;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
border-radius: 20px;
background-color:#ddd;;
width:600px;
padding:10px;
}

El código anterior se verá así:

Recuadro 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,

Otro ejemplo utilizando línea punteada:

#recuadro2{ -moz-column-rule: 3px dotted #f00;
-webkit-column-rule: 3px dotted darkgreen;
column-rule: 3px dotted darkgreen;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
border-radius: 20px;
background-color:lightgreen;
width:600px;
padding:10px;
margin-top:10px;
}

Recuadro 2

Hay tres propiedades que permiten asignar en forma independiente el grosor, estilo y color del separador:

Elemento {
column-rule-width: grosor;
column-rule-style: estilo;
column-rule-color: color;
}

Por ejemplo si queremos definir un separador con línea discontinua de 2 píxeles de color azul:

#recuadro4{ -moz-column-rule-width: 2px;
-webkit-column-rule-width: 2px;
column-rule-width: 2px;
-moz-column-rule-style: dashed;
-webkit-column-rule-style: dashed;
column-rule-style: dashed;
-moz-column-rule-color: darkblue;
-webkit-column-rule-color: darkblue;
column-rule-color: darkblue;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
border-radius: 20px;
background-color:#ddd;
width:600px;
padding:10px;
margin-top:10px;
}

Recuadro 4

#recuadro5{
-moz-column-rule-width: 4px;
-webkit-column-rule-width: 4px;
column-rule-width: 4px;
-moz-column-rule-style: double;
-webkit-column-rule-style: double;
column-rule-style: double;
-moz-column-rule-color: green;
column-rule-color: green;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
border-radius: 20px;
background-color:#ddd;
padding:10px;
margin-top:10px;
}

Múltiples columnas y línea separadora (column-rule)

Valores

Recuadro 1

Recuadro 2

Recuadro 4

Recuadro 5