Publicado em 15 de maio de 2026
As decorações de lacunas CSS estão disponíveis no Chrome e no Edge a partir da versão 149. Estilize as lacunas entre layouts de grade, flexbox e várias colunas sem usar bordas ou pseudo-elementos. Esse recurso foi criado em colaboração entre as equipes do Microsoft Edge e do Google Chrome.
O problema
A estilização de lacunas entre itens de layout sempre exigiu soluções alternativas. Bordas em itens individuais, pseudo-elementos, hacks de plano de fundo. Essas abordagens têm custos:
- Elas dependem da estrutura. Adicionar um separador visual significa mudar a marcação ou escrever seletores para itens específicos.
- Elas interferem na acessibilidade. Elementos DOM extras aparecem na árvore de acessibilidade quando não deveriam.
- Elas são difíceis de manter. Os layouts responsivos quebram as suposições em que a estilização de lacunas foi criada.
- Elas prejudicam a performance. Mais nós DOM, mais trabalho de layout.
- Elas têm uma ergonomia de criação ruim. Cálculos geométricos complexos eram frequentemente necessários para que as coisas funcionassem corretamente.
A propriedade column-rule processa decorações de lacunas para layouts de várias colunas, mas a grade e o flexbox não tinham uma funcionalidade equivalente.
A solução
Os contêineres de grade e flexbox agora aceitam column-rule. Uma nova propriedade row-rule processa lacunas horizontais. Essas decorações são puramente visuais e não afetam os layouts atuais. Se você usar a propriedade column-rule em layouts de várias colunas, o comportamento atual permanecerá o mesmo.
Por exemplo, aqui está um contêiner flexível com três painéis usando uma lista de estilos para as regras de coluna e linha:
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
Como ilustrado neste exemplo, row-rule e column-rule aceitam a mesma abreviação para largura, estilo e cor. Use a abreviação rule para definir as duas de uma só vez.
Novas propriedades
No entanto, não apenas trouxemos column-rule para outros modos de layout e adicionamos a contraparte row. Também introduzimos controles para ajustar as decorações: como elas são divididas nos cruzamentos, a distância das bordas das lacunas, quando elas aparecem em relação aos itens e como variar os estilos entre as lacunas. A largura, a cor e as inserções da regra também podem ser animadas.
A sintaxe repeat()
As decorações de lacunas oferecem suporte a repeat() para os valores de largura, estilo e cor. Isso permite variar as decorações entre as lacunas de forma abreviada, semelhante à sintaxe repeat() usada para definições de faixa na grade:
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
Isso dá às duas primeiras lacunas de linha uma regra de 1 px e a terceira uma regra de 4 px, alternando se houver mais lacunas do que valores. Também é possível transmitir vários valores diretamente sem repeat(). Por exemplo, estilos de regra de linha alternados para limites de hora e meia hora em um calendário:
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
Controlar quebras de decoração
As propriedades column-rule-break e row-rule-break controlam como as decorações se comportam nas interseções de lacunas:
normal(padrão): o comportamento depende do tipo de contêiner. Mais informações estão na especificação.none: as decorações são executadas continuamente pelas interseções.intersection: as decorações são divididas onde as lacunas de linha e coluna se cruzam.
Por exemplo, se você definir rule-break como intersection em um contêiner de grade, as regras serão divididas nas interseções de lacunas em vez de continuar:
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
Se você definir rule-break como none, as regras serão executadas continuamente pelas interseções:
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
Você pode testar esse valor no playground interativo.
Estender ou reduzir decorações
As propriedades column-rule-inset e row-rule-inset controlam a distância das decorações em uma lacuna. É possível definir inserções em todos os lados de uma só vez com a abreviação ou segmentar inserções de forma assimétrica com column-rule-inset-cap (para endpoints que não têm lacunas cruzadas) e column-rule-inset-junction (para endpoints que se cruzam com outras lacunas).
Os valores podem ser comprimentos, porcentagens ou a palavra-chave overlap-join, que une decorações de lacunas em cantos. Por exemplo, definir rule-inset como 5 px reduz todas as decorações em 5 px:
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
Definir rule-inset-cap como 0 px e rule-inset-junction como 10 px oferece decorações que são niveladas nas bordas do contêiner, mas inseridas nas interseções. A demonstração do painel mostrada anteriormente usa essa abordagem, e as inserções são animadas ao passar o cursor:
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
Visibilidade
As propriedades column-rule-visibility-items e row-rule-visibility-items controlam quando as regras aparecem com base na adjacência do item:
normal(padrão): depende do tipo de contêiner.all: as regras aparecem em todas as lacunas, mesmo as vazias.around: as regras aparecem sempre que houver um ou mais itens adjacentes.between: as regras aparecem apenas entre dois itens adjacentes.
A abreviação rule-visibility-items define as duas de uma só vez.
Definir rule-visibility-items como between mostra regras apenas entre itens adjacentes:
section {
rule: 2px solid black;
rule-visibility-items: between;
}
Por outro lado, definir rule-visibility-items como all mostra regras em todas as lacunas, mesmo aquelas sem itens adjacentes:
section {
rule: 2px solid black;
rule-visibility-items: all;
}
Alterne o valor na demonstração ao vivo para conferir a diferença.
Animar decorações
A largura, a cor e as inserções da regra podem ser animadas. É possível fazer a transição delas ao passar o cursor ou qualquer outra mudança de estado. A demonstração do painel mostrada anteriormente faz a transição das cores e inserções da regra ao passar o cursor:
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
Demonstrações
Todas as demonstrações mostradas nesta postagem estão disponíveis em o site de demonstração do Edge.
A postagem do blog sobre a versão de teste para desenvolvedores inclui várias outras demonstrações, incluindo um playground interativo, um menu de hambúrguer, um layout de notebook, e um layout de estilo de revista com uma grade de sudoku.
Mudanças desde a versão de teste para desenvolvedores
Se você testou as decorações de lacunas durante a versão de teste para desenvolvedores (Chrome 139), observe as seguintes mudanças:
- O recurso está disponível por padrão. Não é necessário usar flags.
- Alguns nomes de propriedades foram atualizados para se alinhar à especificação mais recente (por exemplo,
column-rule-outseterow-rule-outsetse tornaramcolumn-rule-inseterow-rule-inset). - As propriedades
column-rule-visibility-itemserow-rule-visibility-itemsforam adicionadas. - O suporte à animação foi adicionado.
Usar decorações de lacunas hoje
As decorações de lacunas funcionam no Chrome e no Edge, a partir da versão 149. Se as decorações de lacunas forem puramente decorativas, o recurso será um aprimoramento progressivo. Em navegadores sem suporte, as lacunas são renderizadas normalmente, sem decorações visíveis. Um polyfill está em desenvolvimento para navegadores que ainda não têm suporte.
Informe bugs no Issue Tracker do Chromium. Para mais informações, consulte a especificação de decorações de lacunas CSS.