Propriedade column-rule
Última atualização: 2026-09-13
column-rule Propriedade column-rule
A propriedade column-rule é a abreviação de column-rule-width, column-rule-style e column-rule-color, desenhando uma linha entre colunas em um layout de várias colunas. Semelhante a border, ela é renderizada apenas dentro do espaço entre colunas, melhorando a separação visual do texto em várias colunas.
| Categoria | |
|---|---|
| Valor Inicial | medium none currentcolor |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<column-rule-width> || <column-rule-style> || <column-rule-color> | Valor | Abreviação para a linha de coluna. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-rule | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： a sintaxe de column-rule espelha border; os três valores podem estar em qualquer ordem, mas o estilo deve ser especificado para a linha ser renderizada.
Aviso： column-rule só aparece em layouts de várias colunas; com uma única coluna, nenhuma linha é exibida. A largura da linha não consome a largura da coluna; ela é desenhada no meio do espaço.
❓ Perguntas Frequentes
QQual é a diferença entre column-rule e border?
Aborder é desenhada ao redor das quatro bordas de um elemento, envolvendo toda a caixa; column-rule é desenhada apenas nos espaços entre colunas para separar colunas adjacentes e nunca aparece nas bordas mais externas. Além disso, column-rule não ocupa espaço extra, pois é pintada dentro da área de espaço, então sua largura não comprime as colunas. Sua sintaxe espelha border, com width, style e color.
QComo faço a linha ficar tracejada?
ADefina column-rule-style como dashed ou dotted, por exemplo column-rule: 2px dashed #999. O estilo aceita todos os tipos de linha que border suporta, como solid, dashed, dotted e double. Lembre-se de que o estilo deve ser especificado; o padrão é none, e sem ele nenhuma linha é renderizada, independentemente da largura ou cor fornecida. Para um visual sutil, uma linha sólida de 1px em cinza claro geralmente é suficiente.
QComo funcionam as três subpropriedades de column-rule?
AA abreviação column-rule cobre três subpropriedades: width, por exemplo 1px; style, por exemplo solid ou dashed, que é necessário para a linha ser renderizada; e color, que tem como padrão currentcolor. Os três valores podem ser escritos em qualquer ordem, então column-rule: #ccc 1px solid é igualmente válido. Qualquer subpropriedade não definida volta ao seu valor inicial, como em border, então uma declaração incompleta ainda renderiza uma linha utilizável.
QPor que a column-rule não está aparecendo?
AMotivos comuns: primeiro, column-rule-style não está definido, e o padrão none não renderiza linha; segundo, o contêiner não é realmente de várias colunas, pois com uma coluna não há espaço para desenhar, então confirme que o conteúdo é longo o suficiente e que column-count ou column-width surtiram efeito; terceiro, a linha fica dentro do espaço, então column-gap:0 a torna invisível. Verifique esses três pontos em ordem.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
column-gap
Define a distância entre colunas.
border (Propriedade de borda)
A propriedade border com sintaxe semelhante a column-rule.
