Rule-visibility-items - CSS Property

rule-visibility-items
row-rule-visibility-items
column-rule-visibility-items

Summary of characteristics of the rule-visibility-items property

Quick description
Sets whether the divider lines should be shown all the time, only when there's an item next to them, or when the line is between two items.
Status
Compatibility issues ⚠
Predefined values
normal | around | between | all
Percentages
Not applicable.
Initial value
noraml
Inherited by default
No.
Animation type
Discrète: during an animation, the rule-visibility-items property passes from one value to another without transition.
Canonical order
Single: single value (no order).
W3C Module
CSS Gap Decorations Module.
References (W3C)
Document status: WD (Working Draft)

Syntax diagram of rule-visibility-items.

rule-visibility-items - Syntax DiagramSyntax diagram of the rule-visibility-items CSS property, who determines when the separation lines are displayed normal normal around around between between all allrule-visibility-items:;rule-visibility-items:;
Syntax diagram of the rule-visibility-items property.
The syntax is the same for column-rule-visibility-items and row-rule-visibility-items
The links in the diagram provide more details about the values.
Download the diagram in SVG.

Description of the rule-visibility-items property.

⚠
This property is experimental. It is described in the CSS Gaps Decoration Module. For now, no browser recognizes it.
This page will be updated soon.

The property rule-visibility-items applies to not fully containers (flex-box, grid, etc.), meaning those that have spots without content. On a grid, for example, this can be done by manually setting grid-row and grid-column.

The property determines whether the borders should be shown all the time, even when there’s no element next to the border, when there’s only one element, or when the border is between two elements, as shown in the example below:

 
 
all
 
 
around
 
 
between

Values for rule-visibility-items.

    ⚠ Our examples, of course, only work on compatible browsers (see the table below). Examples on a flex-box container seem to not work on any browser.

  • column-rule-visibility-items: normal; row-rule-visibility-items: normal; rule-visibility-items: normal;

    This is the default value of the property. On a grid container, normal is equivalent to all. On a flex-box container, when the value is applied to column-rule-visibility-items it’s equivalent to between, but applied to row-rule-visibility-items it’s equivalent to all.

    Grille
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:normal;
    Flex-box
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:normal;
  • column-rule-visibility-items: around; row-rule-visibility-items: around; rule-visibility-items: around;

    The line is drawn only if there is at least one element on either side of the line.

    Grille
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:around;
    Flex-box
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:around;
  • column-rule-visibility-items: between; row-rule-visibility-items: between; rule-visibility-items: between;

    The line is only drawn if it's between two elements.

    Grille
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:between;
    Flex-box
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:between;
  • column-rule-visibility-items: all; row-rule-visibility-items: all; rule-visibility-items: all;

    The lines are drawn in all cases, even if nothing is next to them.

    Grille
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:all;
    Flex-box
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:all;
  • rule-visibility-items: initial; (noraml) rule-visibility-items: inherit; rule-visibility-items: revert; rule-visibility-items: revert-layer; rule-visibility-items: revert-rule; rule-visibility-items: unset;

    Links to the presentation of these different values: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the rule-visibility-items property.

The property rule-visibility-items can be animated in a discrete way (abrupt jump from one value to another), as shown in the example below.

 
 
 
 
 
 
 
 
 
 

Simulator.

The simulator lets you test the row-rule-visibility-items and column-rule-visibility-items properties on a grid container.

column-rule-visibility-items :
row-rule-visibility-items :
 
 
 
 
 
 
 
 
 
 

Browsers compatibility with rule-visibility-items.

For now (2026), only two major browsers handle the property rule-visibility-items: Chrome  , Edge  , and a few mobile browsers.

Column 1
Support for the rule-visibility-items property, which indicates when the row and column separators should be visible.
Column 2
Support for the row-rule-visibility-items property, which tells you when row separators should be visible.
Column 3
Support for the column-rule-visibility-items property, which tells you when column separators should be visible.
1
rule-visibility-items
property
2
row-rule-visibility-items
property
3
column-rule-visibility-items
property
Estimated overall support.
57%
57%
57%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Samsung Internet

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse

Historic of the rule-visibility-items property.

  • CSS Gap Decorations Module Level 1.

    This module covers the rules that define gutters between columns in a multi-column container (grid, flex-box...). It extends these possibilities to gutters between elements arranged in multiple rows, allowing these features to be used on other types of containers. Several properties define how these gutters should be drawn.

    Regarding rule-visibility-items First presentation of the rule-visibility-items short hand property.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

See also, about gap decorations.

The CSS Gap Decorations Module. groups together the properties that concern decorative borders, including those that were previously in the "CSS Multi-Columns" module (like the ones whose names start with column-rule...). Here are these properties:

Properties:

⚠
column-rule-break
Defines how the column separator lines behave at intersections with the row separator lines.
⚠
column-rule-inset
Sets the spacing at the ends of the column separation lines (in a grid container or any other container that displays blocks in columns).
Column-rule-visibility-items
Sets whether the column dividers should be shown all the time, only when there's an item next to them, or when the divider is between two items.
⚠
row-rule
Shorthand property that sets the thickness, style, and color of row separator lines, in the context of a flex container, or a grid container.
⚠
row-rule-break
Defines how the line separator traits behave at the intersections with the column separator traits.
⚠
row-rule-color
Defines the color of the dividing lines within a grid or flex-box container.
⚠
row-rule-inset
Sets the spacing at the ends of the line divider lines (in a grid container or any other container that displays blocks in columns).
⚠
row-rule-style
Defines the line style to be used for separating lines, in the context of a grid container or a flex-box container.
Row-rule-visibility-items
Sets whether the line separators should be shown all the time, only when there's an item next to them, or when the line is between two items.
⚠
row-rule-width
Defines the thickness of the line separation traits in a grid container or flex-box container context.
⚠
rule
Shorthand property that assigns the same values to the lines separating the rows and those separating the columns.
⚠
rule-break
Property that defines how the row and column gridlines behave at their intersection.
⚠
rule-color
Sets the color of the dividing lines between rows and columns, in the context of a grid container, a flex container, or any other container that displays blocks in rows or columns.
⚠
rule-inset
Check if the lines separating the rows and the ones separating the columns touch at the intersections (like in a grid container or any other container that lays out blocks in rows and columns).
⚠
rule-overlap
Define which of the lines separating the rows or the lines separating the columns go above the others.
⚠
rule-style
Sets the style for the line between rows and columns, in the context of a grid container, a flex container, or any other container that displays blocks in rows and columns.
Rule-visibility-items
Sets whether the divider lines should be shown all the time, only when there's an item next to them, or when the line is between two items.
⚠
rule-width
Sets the thickness of the lines that separate rows and columns, in the context of a container displaying blocks in rows and columns (grid, flex-box, etc.).