Propiedad CSS column-rule
La propiedad abreviada column-rule define el estilo, ancho y color de la línea entre columnas. Ver ejemplos y aprende sobre esta propiedad.
La propiedad abreviada column-rule define el estilo, el ancho y el color de la línea trazada entre las columnas de un diseño multicolumna. Funciona como la abreviatura border, pero en lugar de dibujar un recuadro alrededor de un elemento, traza una única línea vertical en cada column gap.
La línea es puramente decorativa: se pinta dentro del espacio entre columnas y no ocupa espacio propio. Aumentar el grosor de la línea no separa las columnas — solo column-gap modifica el espaciado. Por eso una línea gruesa puede superponerse visualmente al texto de ambos lados si el espacio es demasiado pequeño.
column-rule es una abreviatura de estas tres propiedades individuales:
- column-rule-width — el grosor de la línea.
- column-rule-style — el estilo de la línea (
solid,dotted,dashed, etc.). - column-rule-color — el color de la línea.
Como toda abreviatura, cualquier propiedad individual que se omita se restablece a su valor inicial. Así, column-rule: 5px solid; establece el ancho y el estilo de forma explícita, mientras que el color regresa a currentColor (el color de texto del elemento), y el ancho vuelve a medium si se omite.
Cuándo usar column-rule
Utiliza column-rule cuando dividas texto continuo en varias columnas y quieras un separador visible — diseños de artículos estilo periódico, listas de enlaces, grupos de enlaces en el pie de página o un glosario. Una discreta línea 1px solid #ddd ayuda al ojo a seguir dónde termina una columna y comienza la siguiente sin añadir marcado adicional.
La línea solo se muestra cuando el elemento establece realmente un diseño multicolumna — es decir, cuando column-count o la abreviatura columns crea más de una columna. En un elemento de una sola columna no hay espacios, por lo que no se dibuja nada.
column-rule es una de las propiedades de CSS3.
| Valor inicial | medium (ancho), none (estilo), currentColor (color) |
|---|---|
| Se aplica a | Contenedores de bloque que establecen un diseño multicolumna. También se aplica a ::first-letter. |
| Heredable | No. |
| Animable | Sí. El color y el ancho de column-rule son animables. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.columnRule = "5px outset #ccc"; |
Sintaxis
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;El orden de los tres valores es flexible — el navegador los distingue por tipo, por lo que column-rule: dotted 5px #ccc es igual de válido que column-rule: 5px dotted #ccc. Como con border, un valor de none (u omitir el estilo) significa que no se dibuja ninguna línea, porque column-rule-style tiene como valor predeterminado none.
Ejemplo de la propiedad column-rule:
Ejemplo con valores de ancho, estilo y color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: 5px dotted #ccc;
}
</style>
</head>
<body>
<h1>Column-rule example</h1>
<p>Here the column-rule is set to 5px dotted gray.</p>
<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>Resultado
Si se proporciona un único valor, se interpreta como el column-rule-style (las otras dos propiedades individuales mantienen sus valores iniciales).
Ejemplo de la propiedad column-rule con un valor:
Ejemplo con un único valor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: dashed;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to only "dashed".</p>
<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>Ejemplo de la propiedad column-rule con ancho, estilo y color especificados:
Ejemplo con todos los valores especificados
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: 30px;
column-rule: 10px groove #ccc;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to 10px groove gray.</p>
<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>Valores
| Valor | Descripción |
|---|---|
| column-rule-width | Define el ancho de la línea entre columnas. El valor predeterminado es "medium". |
| column-rule-style | Define el estilo de la línea entre columnas. El valor predeterminado es "none". |
| column-rule-color | Establece el color de la línea. El valor predeterminado es el color actual del elemento. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Aspectos a tener en cuenta
- La línea necesita un contexto multicolumna. Establece column-count (o la abreviatura columns) en el mismo elemento; de lo contrario, la línea nunca aparece.
- Un estilo ausente significa que no hay línea. Como
column-rule-styletiene por defecto el valornone,column-rule: 5px #ccc;no dibuja nada. Incluye siempre una palabra clave de estilo comosolidodotted. - La línea no cambia el diseño. Su ancho se toma del espacio existente entre columnas, no se añade a él. Si una línea gruesa se superpone al texto, aumenta column-gap — la línea se centra dentro de ese espacio.
- No hay línea antes de la primera ni después de la última columna. Solo se traza una línea entre columnas adyacentes, nunca en los bordes exteriores.
Compatibilidad con navegadores
column-rule es ampliamente compatible con todos los navegadores modernos (Chrome, Edge, Firefox, Safari y Opera). Las versiones antiguas de WebKit y Gecko requerían los prefijos -webkit- y -moz-, pero hoy en día se puede usar column-rule sin prefijos con total seguridad.