Propriedade CSS column-rule-style
A propriedade CSS column-rule-style define o estilo da linha entre colunas. Conheça os valores com exemplos ilustrados.
A propriedade CSS column-rule-style define o estilo da linha (régua) desenhada entre as colunas de um layout de múltiplas colunas. A régua de coluna funciona exatamente como uma borda: ela fica no column-gap e separa visualmente as colunas adjacentes, aceitando o mesmo conjunto de estilos de linha que uma borda aceita.
Esta propriedade é uma das propriedades CSS3.
column-rule-style é uma das três sub-propriedades que compõem o shorthand column-rule, junto com column-rule-width e column-rule-color. Por si só, ela controla apenas o formato da linha — geralmente é necessário combinar as três para obter um resultado visível.
Quando usar
Use column-rule-style sempre que dividir texto em múltiplas colunas e quiser um divisor visível — como em um layout de jornal ou revista. Como a régua fica dentro do espaço entre colunas, ela não ocupa espaço extra e nunca afasta o conteúdo, sendo uma forma limpa de separar colunas sem alterar a largura do layout.
Para usar esta propriedade, o elemento deve primeiro ser transformado em um contêiner de múltiplas colunas com as propriedades columns ou column-count — a régua não tem nada entre o que desenhar se houver apenas uma coluna.
Pontos de atenção
- A régua é invisível por padrão porque o estilo inicial é
none. Mesmo após definir um estilo, a régua não será renderizada a menos que column-rule-width seja maior que0(a largura padrão émedium, que normalmente é visível). - Os estilos 3D —
groove,ridge,inseteoutset— dependem da cor da régua. Com uma cor muito clara outransparent, o efeito 3D pode ser difícil de visualizar; defina column-rule-color explicitamente. hiddenenoneambos não desenham nada, mashiddenainda reserva uma largura no espaço, enquantononecolapsa para largura zero — a diferença só importa quando outros estilos de régua se encontram com ele.
A propriedade column-rule-style possui os seguintes valores:
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
| Valor Inicial | none |
|---|---|
| Aplica-se a | Elementos de múltiplas colunas. |
| Herança | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.columnRuleStyle = "dashed" ; |
Sintaxe
Sintaxe da Propriedade CSS column-rule-style
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemplo da propriedade column-rule-style:
Exemplo da Propriedade CSS column-rule-style com o valor dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: dotted;
}
</style>
</head>
<body>
<h2>Column-rule-style property example</h2>
<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
No próximo exemplo, a régua entre as colunas é double. Aqui a régua recebe uma cor com a propriedade column-rule-color e uma espessura explícita com column-rule-width, tornando a linha dupla claramente visível.
Exemplo da propriedade column-rule-style com o valor "double":
Exemplo da Propriedade CSS column-rule-style com o valor double
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: double;
column-rule-color: #1c87c9;
column-rule-width: 5px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-style 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 |
|---|---|
| none | Nenhuma régua é definida. Este é o valor padrão. |
| hidden | A régua está oculta. |
| dotted | A régua é pontilhada. |
| dashed | A régua é tracejada. |
| solid | A régua é sólida. |
| double | A régua é dupla. |
| groove | A régua é um sulco 3D. Os valores de largura e cor definem o efeito. |
| ridge | A régua é uma crista 3D. Os valores de largura e cor definem o efeito. |
| inset | A régua é um entalhe 3D. Os valores de largura e cor definem o efeito. |
| outset | A régua é um relevo 3D. Os valores de largura e cor definem o efeito. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
- column-rule — shorthand que define largura, estilo e cor de uma só vez.
- column-rule-width — espessura da régua.
- column-rule-color — cor da régua.
- column-gap — o espaço dentro do qual a régua é desenhada.
- column-count e columns — criam o layout de múltiplas colunas.