Rule-inset - CSS Property

Syntax diagram of rule-inset.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• l1, l2, l3 et l4: four numeric values followed by one of CSS dimension units.
  l1 is the value for row-rule-inset-cap-start and column-rule-inset-cap-start,
  l2 is the value for row-rule-inset-cap-end and column-rule-inset-cap-end,
  l3 is the value for row-rule-inset-junction-start and column-rule-inset-junction-start,
  l4 is the value for row-rule-inset-junction-end and column-rule-inset-junction-end,
  All of these values except l1 are optional.
• % is a percentage calculated based on the initial spacing of the lines.

Description of the rule-inset property.

⚠

This property is experimental. It is described in the specification "CSS Gap Decorations Module." For now, only Edge  , Chrome  , and a few mobile browsers recognize it.

The property rule-inset describes the spaces to leave at the ends of each lines. These spaces come in two types:
  - cap when this end is at the end.
  - junction when two lines meet.
Each of these types of spaces is then divided into start and end depending on whether the line starts or ends at that point. These spaces are visible when the property rule-break is set to intersection. This is shown in the diagram below.

Naming of line ends on a complete grid.
CS: Cap Start - CE: Cap End.
JS: Junction Start - JE: Junction End.

Naming of line ends on an incomplete grid.
CS: Cap Start - CE: Cap End.
JS: Junction Start - JE: Junction End.

rule-inset is a shorthand property, well, not exactly, because it applies the same value to spaces on rows as to spaces on columns. But there are a lot of longhand properties, eight in total, with plenty of shorthand properties across multiple levels.
The first level concerns properties that apply the same value to the start and end ends.
The second level concerns properties that apply the same value to the cap and junction intersections.
Finally, the third-level property applies the values to both rows and columns.

But there's another way to group these properties, which gives even more summarized properties. At the first level, the properties apply the same value to the cap and junction intersections. At the second level, the properties apply to both rows and columns.

Language support.

All these properties are naturally sensitive to the writing mode of the language, both in direction (ltr or rtl) and in writing orientation (horizontal or vertical). In the examples below, all the grids had the same value for rule-inset, but their writing mode is different.

Values for rule-inset.

⚠ Of course, our examples only work on compatible browsers (see the table below).

• rule-inset: 25px 10px / 10px 5px; l1 l2 l3 l4

  rule-inset accepts up to 4 values with the syntax above. These four values can be positive, negative, or zero, but must be followed by one of CSS dimension units. They can also be percentages, calculated based on the initial space between the lines.

  • l1 corresponds to the spaces marked CS (Cap Start).
  • l2 corresponds to the spaces marked CE (Cap End). By default, they are taken equal to the l1 spaces.
  • l3 corresponds to the spaces marked JS (Junction Start). By default, they are taken equal to the l1 spaces.
  • l4 corresponds to the spaces marked JE (Junction End). By default, they are taken equal to the l3 spaces if the latter is specified, otherwise they are taken equal to l2.

  Reminder: the property rule-break must have received the value intersection.

  rule-inset:10px 0px / 0px 0px;

  rule-inset:0px 10px / 0px 0px;

  rule-inset:0px 0px / 10px 0px;

  rule-inset:0px 0px / 0px 10px;
• rule-inset: overlap-join;

  Any value can be replaced with the keyword overlap-join. On a cap, the value is 0. On a junction, the overlap-join value makes the nets touch each other.

  rule-inset:overlap-join 0px / 0px 0px;
• rule-inset: initial; (0) rule-inset: inherit; rule-inset: revert; rule-inset: revert-layer; rule-inset: revert-rule; rule-inset: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the rule-inset property.

It is possible to create many effects with rule-inset animation or the corresponding detailed properties. Here's an example.

Simulator.

You can play around with the property values for row-rule-inset and column-rule-inset and see the result on the grid below.

Browsers compatibility with rule-inset.

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

1

rule-inset
property

2

row-rule-inset
property

3

column-rule-inset
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-inset 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-inset Definition of the rule-inset property and all other properties related to spacing at the ends of row and/or column separators.
  

  April 17, 2025

  Working Draft.

  

  

  

See also, about space decorations.

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

Properties: