Fecha de publicación: 15 de mayo de 2026
Las decoraciones de separación de CSS están disponibles en Chrome y Edge a partir de la versión 149. Aplica estilo a los espacios entre los diseños de cuadrícula, Flexbox y de varias columnas sin usar bordes ni seudoelementos. Esta función se creó en colaboración entre los equipos de Microsoft Edge y Google Chrome.
El problema
Siempre se necesitaron soluciones alternativas para aplicar estilos a los espacios entre los elementos de diseño. Bordes en elementos individuales, seudoelementos y soluciones alternativas de fondo Estos enfoques tienen costos:
- Dependen de la estructura. Agregar un separador visual significa cambiar tu marcado o escribir selectores para elementos específicos.
- Interfieren con la accesibilidad. Aparecen elementos DOM adicionales en el árbol de accesibilidad cuando no deberían.
- Son difíciles de mantener. Los diseños responsivos rompen los supuestos en los que se basó el diseño de tu brecha.
- Afectan el rendimiento. Cuantos más nodos DOM haya, más trabajo de diseño se requerirá.
- Tienen una ergonomía de creación deficiente. A menudo, se necesitaban cálculos geométricos complejos para que las cosas funcionaran correctamente.
La propiedad column-rule controla las decoraciones de brechas para los diseños de varias columnas, pero la cuadrícula y Flexbox no tenían una funcionalidad equivalente.
La solución
Los contenedores de cuadrícula y de flexbox ahora aceptan column-rule. Una nueva propiedad row-rule controla los espacios horizontales. Estas decoraciones son puramente visuales y no afectan los diseños existentes. Si usas la propiedad column-rule en diseños de varias columnas, el comportamiento existente sigue siendo el mismo.
Por ejemplo, aquí se muestra un contenedor flexible con tres paneles que usa una lista de diseños para sus reglas de columna y fila:
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
Como se ilustra en este ejemplo, tanto row-rule como column-rule aceptan la misma abreviatura para el ancho, el estilo y el color. Usa la abreviatura rule para establecer ambos valores a la vez.
Propiedades nuevas
Sin embargo, no solo llevamos column-rule a otros modos de diseño y agregamos la contraparte de row. También presentamos controles para ajustar tus decoraciones: cómo se interrumpen en las intersecciones, qué tan lejos se insertan desde los bordes de los espacios, cuándo aparecen en relación con los elementos y cómo variar los estilos en los espacios. El ancho, el color y las inserciones de la regla también se pueden animar.
Sintaxis de repeat()
Las decoraciones de brechas admiten repeat() para sus valores de ancho, estilo y color. Esto te permite variar las decoraciones en los espacios de formato corto, de manera similar a la sintaxis repeat() que se usa para las definiciones de pistas en la cuadrícula:
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
Esto le da a los dos primeros espacios entre filas una regla de 1 px y al tercero una regla de 4 px, que se repiten si hay más espacios que valores. También puedes pasar varios valores directamente sin repeat(). Por ejemplo, estilos de reglas de filas alternados para los límites de horas y medias horas en un calendario:
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
Controla las interrupciones de la decoración
Las propiedades column-rule-break y row-rule-break controlan el comportamiento de las decoraciones en las intersecciones de brechas:
normal(predeterminado): El comportamiento depende del tipo de contenedor. Puedes encontrar más información en la especificación.none: Las decoraciones se ejecutan de forma continua en las intersecciones.intersection: Intersección de decoración en la que se cruzan los espacios entre filas y columnas.
Por ejemplo, si configuras rule-break como intersection en un contenedor de cuadrícula, las reglas se interrumpen en las intersecciones de los espacios en lugar 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;
}
Si configuras rule-break como none, las reglas se ejecutan de forma continua en las intersecciones:
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
Puedes probar este valor en el playground interactivo.
Cómo extender o reducir las decoraciones
Las propiedades column-rule-inset y row-rule-inset controlan hasta dónde se extienden las decoraciones dentro de un espacio. Puedes establecer inserciones en todos los lados a la vez con la abreviatura o segmentar las inserciones de forma asimétrica con column-rule-inset-cap (para extremos que no tienen espacios de cruce) y column-rule-inset-junction (para extremos que se cruzan con otros espacios).
Los valores pueden ser longitudes, porcentajes o la palabra clave overlap-join, que une las decoraciones de brechas en las esquinas. Por ejemplo, si se establece rule-inset en 5 px, todas las decoraciones se reducen 5 px hacia adentro:
.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;
}
Si configuras rule-inset-cap en 0 px y rule-inset-junction en 10 px, obtendrás decoraciones que se alinean con los bordes del contenedor, pero se insertan en las intersecciones. La demostración del panel que se mostró anteriormente usa este enfoque, y las inserciones se animan cuando se coloca el cursor sobre ellas:
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
Visibilidad
Las propiedades column-rule-visibility-items y row-rule-visibility-items controlan cuándo aparecen las reglas según la adyacencia del elemento:
normal(predeterminado): Depende del tipo de contenedor.all: Las reglas aparecen en todos los espacios, incluso en los vacíos.around: Las reglas aparecen donde hay uno o más elementos adyacentes.between: Las reglas solo aparecen entre dos elementos adyacentes.
La abreviatura rule-visibility-items establece ambos valores a la vez.
Si configuras rule-visibility-items como between, se mostrarán reglas solo entre elementos adyacentes:
section {
rule: 2px solid black;
rule-visibility-items: between;
}
Por otro lado, si configuras rule-visibility-items como all, se mostrarán reglas en cada brecha, incluso en aquellas que no tengan elementos adyacentes:
section {
rule: 2px solid black;
rule-visibility-items: all;
}
Activa o desactiva el valor en la demostración en vivo para ver la diferencia.
Anima decoraciones
El ancho, el color y las inserciones de la regla se pueden animar. Puedes hacer la transición cuando se coloque el cursor sobre ellos o en cualquier otro cambio de estado. La demostración del panel que se mostró anteriormente realiza una transición de los colores y las inserciones de la regla al colocar el cursor sobre ella:
.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;
}
Demostraciones
Todas las demostraciones que se muestran en esta entrada están disponibles en el sitio de demostraciones de Edge.
La publicación de blog sobre la prueba para desarrolladores incluye varias demostraciones más, como un espacio de pruebas interactivo, un menú de hamburguesas, un diseño de notebook y un diseño de estilo de revista con una cuadrícula de sudoku.
Cambios desde la prueba para desarrolladores
Si probaste las decoraciones de brechas durante la prueba para desarrolladores (Chrome 139), ten en cuenta los siguientes cambios:
- La función está disponible de forma predeterminada; no se necesitan marcas.
- Se actualizaron algunos nombres de propiedades para alinearlos con la especificación más reciente (por ejemplo,
column-rule-outsetyrow-rule-outsetse convirtieron encolumn-rule-insetyrow-rule-inset). - Se agregaron las propiedades
column-rule-visibility-itemsyrow-rule-visibility-items. - Se agregó compatibilidad con animaciones.
Usa decoraciones de brechas hoy mismo
Las decoraciones de brechas funcionan en Chrome y Edge a partir de la versión 149. Si las decoraciones de separación son puramente decorativas, la función es una mejora progresiva; en los navegadores sin compatibilidad, las separaciones se renderizan normalmente sin decoraciones visibles. Se está desarrollando un polyfill para los navegadores que aún no son compatibles.
Informa los errores en la herramienta de seguimiento de errores de Chromium. Para obtener más información, consulta la especificación de CSS Gap Decorations.