Propriedade CSS column-rule
A propriedade abreviada column-rule define o estilo, largura e cor da linha entre colunas. Veja exemplos e aprenda sobre esta propriedade.
A propriedade abreviada column-rule define o estilo, a largura e a cor da linha desenhada entre as colunas de um layout de múltiplas colunas. Funciona como a abreviação border, mas em vez de desenhar uma caixa ao redor de um elemento, ela desenha uma única linha vertical em cada column gap.
A linha é puramente decorativa: ela é pintada dentro do espaço entre colunas e não ocupa espaço próprio. Ampliar a linha não afasta as colunas — somente column-gap altera o espaçamento. É por isso que uma linha espessa pode sobrepor visualmente o texto de ambos os lados se o espaço for muito pequeno.
column-rule é uma abreviação para estas três propriedades individuais:
- column-rule-width — a espessura da linha.
- column-rule-style — o estilo da linha (
solid,dotted,dashed, etc.). - column-rule-color — a cor da linha.
Como toda abreviação, qualquer propriedade individual omitida é redefinida para seu valor inicial. Assim, column-rule: 5px solid; define explicitamente a largura e o estilo, enquanto a cor retorna para currentColor (a cor do texto do elemento), e a largura retorna para medium se omitida.
Quando usar column-rule
Use column-rule sempre que dividir o texto em múltiplas colunas e quiser um separador visível — layouts de artigos estilo jornal, listas de links, grupos de links no rodapé ou um glossário. Uma linha sutil 1px solid #ddd ajuda o olho a perceber onde uma coluna termina e a próxima começa, sem adicionar marcação extra.
A linha só é renderizada quando o elemento efetivamente estabelece um layout de múltiplas colunas — ou seja, quando column-count ou a abreviação columns cria mais de uma coluna. Em um elemento de coluna única não há espaços entre colunas, portanto nada é desenhado.
column-rule é uma das propriedades CSS3.
| Valor inicial | medium (largura), none (estilo), currentColor (cor) |
|---|---|
| Aplica-se a | Contêineres de bloco que estabelecem um layout de múltiplas colunas. Também se aplica a ::first-letter. |
| Herdada | Não. |
| Animável | Sim. A cor e a largura do column-rule são animáveis. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.columnRule = "5px outset #ccc"; |
Sintaxe
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;A ordem dos três valores é flexível — o navegador os distingue pelo tipo, portanto column-rule: dotted 5px #ccc é tão válido quanto column-rule: 5px dotted #ccc. Assim como no border, um valor none (ou omitir o estilo) significa que nenhuma linha é desenhada, porque column-rule-style tem como padrão none.
Exemplo da propriedade column-rule:
Exemplo com valores de largura, estilo e cor
<!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
Se um único valor for fornecido, ele é interpretado como o column-rule-style (as outras duas propriedades individuais mantêm seus valores iniciais).
Exemplo da propriedade column-rule com um único valor:
Exemplo com um ú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>Exemplo da propriedade column-rule com largura, estilo e cor especificados:
Exemplo com todos os 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 | Descrição |
|---|---|
| column-rule-width | Define a largura da linha entre as colunas. O valor padrão é "medium". |
| column-rule-style | Define o estilo da linha entre as colunas. O valor padrão é "none". |
| column-rule-color | Define a cor da linha. O valor padrão é a cor atual do elemento. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Pontos de atenção
- A linha precisa de um contexto de múltiplas colunas. Defina column-count (ou a abreviação columns) no mesmo elemento, caso contrário a linha nunca aparecerá.
- Sem estilo, nenhuma linha é exibida. Como
column-rule-styletem como padrãonone,column-rule: 5px #ccc;não desenha nada. Sempre inclua uma palavra-chave de estilo comosolidoudotted. - A linha não altera o layout. Sua largura é retirada do espaço existente entre colunas, não adicionada a ele. Se uma linha espessa sobrepõe o texto, aumente o column-gap — a linha se centraliza dentro desse espaço.
- Nenhuma linha antes da primeira ou após a última coluna. A linha é desenhada apenas entre colunas adjacentes, nunca nas bordas externas.
Suporte nos navegadores
column-rule tem amplo suporte em todos os navegadores modernos (Chrome, Edge, Firefox, Safari e Opera). Versões mais antigas do WebKit e do Gecko exigiam os prefixos -webkit- e -moz-, mas o column-rule sem prefixo pode ser usado com segurança hoje em dia.