Propriedade CSS column-rule-width
A propriedade CSS column-rule-width define a espessura da linha divisória entre colunas em layouts de múltiplas colunas, com exemplos.
A propriedade CSS column-rule-width define a espessura da linha divisória que é desenhada entre as colunas de um layout de múltiplas colunas. Ela funciona como uma largura de borda — mas, em vez de envolver uma caixa, a linha divisória fica no espaço entre as colunas. É uma das propriedades CSS3.
Por si só, column-rule-width não produz nenhum efeito visual. A linha divisória só aparece quando column-rule-style é definido com um valor diferente de none (o valor inicial), pois uma linha sem estilo não tem nada para desenhar. Você também precisa de mais de uma coluna — a linha divisória é pintada apenas nos espaços que efetivamente separam colunas, e nunca no espaço vazio deixado quando o conteúdo não preenche todas as colunas.
Esta propriedade aceita um dos seguintes valores:
thin— uma linha fina.medium— uma linha média. Este é o valor inicial.thick— uma linha grossa.<length>— uma largura explícita, como2pxou0.2em. Porcentagens e valores negativos não são permitidos.
A especificação deixa deliberadamente a espessura exata em pixels de thin, medium e thick a cargo do navegador. Ela apenas garante a ordenação: thin ≤ medium ≤ thick. Quando você precisar de um resultado previsível entre navegadores, use um <length>.
Na maioria das folhas de estilo, você definirá a largura, o estilo e a cor juntos com o atalho column-rule, em vez de escrever três declarações separadas:
/* These two rules are equivalent */
column-rule: 15px groove #1c87c9;
column-rule-width: 15px;
column-rule-style: groove;
column-rule-color: #1c87c9;| Valor inicial | medium |
|---|---|
| Aplica-se a | Elementos multicoluna. |
| Herdado | Não. |
| Animável | Sim. A largura e a cor da linha são animáveis. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.columnRuleWidth = "5px"; |
Sintaxe
Sintaxe da Propriedade CSS column-rule-width
column-rule-width: medium | thin | thick | length | initial | inherit;Exemplo da propriedade column-rule-width:
Exemplo da Propriedade CSS column-rule-width com o valor thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: dotted;
column-rule-color: #666;
column-rule-width: thick;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width 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>Resultado
Exemplo da propriedade column-rule-width com o valor "thin":
Exemplo da Propriedade CSS column-rule-width com o valor thin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: thin;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width 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>Exemplo da propriedade column-rule-width especificada como "15px":
Exemplo da Propriedade CSS column-rule-width com o valor length
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: groove;
column-rule-color: #1c87c9;
column-rule-width: 15px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width 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>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| medium | A linha é média. Este é o valor padrão. | |
| thick | A linha é grossa. | |
| thin | A linha é fina. | |
| length | Especifica a largura da linha. | |
| initial | Define a propriedade com seu valor padrão. | |
| inherit | Herda a propriedade do elemento pai. |
Pontos importantes a considerar
- A linha não ocupa espaço no layout. Assim como um box-shadow, a linha é pintada dentro do
column-gap. Uma linha mais larga do que o espaçamento sobrepõe o conteúdo das colunas em vez de afastá-las, portanto, certifique-se de que o espaçamento seja suficientemente amplo para a largura escolhida. - Sem estilo, sem linha. Se
column-rule-stylefornone(ou não estiver definido), alterar a largura não tem nenhum efeito visível. Esta é a razão mais comum para uma linha "não aparecer". - Apenas comprimentos — sem porcentagens. Ao contrário de muitos tamanhos em CSS,
column-rule-widthrejeita valores percentuais e negativos; um valor inválido faz com que toda a declaração seja ignorada. - É animável. Animar a largura produz um espessamento ou afinamento suave da linha divisória.
Propriedades relacionadas
A linha divisória de múltiplas colunas é controlada por um pequeno conjunto de propriedades que você geralmente usará em conjunto:
column-rule— o atalho para largura, estilo e cor.column-rule-style— o estilo da linha; necessário para que a largura seja exibida.column-rule-color— a cor da linha.column-countecolumn-gap— definem quantas colunas existem e o espaço onde a linha divisória se encontra.