Title: CSS Gap Decorations Module Level 1
Shortname: css-gaps
Level: 1
Status: ED
Prepare for TR: no
Group: csswg
Work Status: revising
Repository: w3c/csswg-drafts
URL: https://drafts.csswg.org/css-gaps-1/
TR: https://www.w3.org/TR/css-gaps-1/
Previous Version: https://www.w3.org/TR/2026/WD-css-gaps-1-20260227/
Previous Version: https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/
Editor: Kevin Babbitt, Microsoft, https://github.com/kbabbitt, w3cid 124689
Abstract: This module introduces several properties to add row and column gap decorations to container layout types such as grid and flex.
WPT Path Prefix: css/css-gaps/
WPT Display: open

urlPrefix: https://drafts.csswg.org/css-grid-3/; type: dfn; spec: CSS-GRID-3; text: grid lanes container

spec:css-backgrounds-3; type:property; text:border-style
spec:css-backgrounds-3; type:type; text:
spec:css-backgrounds-3; type:type; text:
spec:css-backgrounds-3; type:value; for:; text:hidden
spec:css-backgrounds-3; type:value; for:; text:none
spec:css-color-5; type:type; text:

Introduction

This section is not normative. [[CSS-MULTICOL-1#column-gaps-and-rules]] allows for rules to be drawn between columns in a multicol container. This specification expands upon the 'column-rule-width', 'column-rule-style', and 'column-rule-color' properties, adding equivalents in the row direction, expanding their application to other container layouts, and giving advanced control over where and how gap decorations are painted.

Value Definitions

This specification follows the CSS property definition conventions from [[!CSS2]] using the value definition syntax from [[!CSS-VALUES-3]]. Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]]. Combination with other CSS modules may expand the definitions of these value types. In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly.

Gaps

Various layouts in CSS such as multicol containers, flex containers, grid containers, and grid lanes containers position child boxes adjacent to each other with [=gaps=], also known as gutters, between them. For the purposes of this specification, gap, column gap, and row gap are defined as follows depending on the type of container:

multi-column containers: In the column direction, [=gap=] ([=column gap=]) refers to the [=gutter=] between adjacent column boxes within each [=multicol line=], see [[CSS-MULTICOL-1]]. In the row direction, [=gap=] ([=row gap=]) refers to the [=gutter=] between the rows of [=column boxes=] established by 'column-height', see [[CSS-MULTICOL-2]].
flex containers: In the main axis (e.g. 'column-gap' in a ''flex-flow/row'' flex container), [=gap=] ([=column gap=]) refers to the [=gutter=] between items within a single [=flex line=]. In the cross axis (e.g. 'row-gap' in a ''flex-flow/row'' flex container), [=gap=] ([=row gap=]) refers to the [=gutter=] between adjacent flex lines.
grid containers: [=row gaps=] and [=column gaps=] refer to the [=gutters=] between grid rows and grid columns, respectively. See [[css-grid-1#gutters]] for precise details.

Note: As specified in [[CSS-ALIGN-3#column-row-gap]], additional spacing between items added by 'justify-content' and 'align-content' is included in [=gap=] size.

[=Column gaps=] in orange in a multicol container with a spanner element. Note that [=column gaps=] break when they encounter the spanner.

Gaps in a multicol container with `column-wrap: wrap`; [=column gaps=] in orange and [=row gaps=] in blue). Note that [=column gaps=] in multicol containers do not overlap [=row gaps=], similar to flex.

Gaps in a grid container; [=column gaps=] in orange and [=row gaps=] in blue. Note the shaded areas where gaps overlap.

Gaps in a flex container; [=column gaps=] in orange and [=row gaps=] in blue. Note that, unlike in grid, gaps in flex do not overlap.

Gap decorations

[=Gaps=] may contain a gap decoration, which is a visible separator (such as a line) painted between adjacent boxes. Gap decorations do not take up space. That is, the presence or width of a gap decoration will not alter the placement of anything else. If a gap decoration is wider than its gap, any adjacent boxes will overlap the decoration, and in some cases the decoration may extend outside the box of the container. Gap decorations are painted just above the border of the container. For scrollable containers, note that while the border and background of the container aren't scrolled, the decorations need to scroll along with items in the container. [=Gap decorations=] follow the definitions of "column" and "row" laid out by the container to which the properties are applied. They depend on the container type taking writing mode and text direction into account when determining the meanings of these terms. For examples, see: [[CSS-MULTICOL-2#the-multi-column-model]], [[CSS-FLEXBOX-1#flex-direction-property]], and [[CSS-GRID-1#grid-concepts]]. Properties in this specification whose names begin with "column" apply to [=column gaps=], and properties in this specification whose names begin with "row" apply to [=row gaps=].

Geometry

[=Gap decorations=] are painted within a [=gap=] as one or more [=gap decoration segments=].

Segment endpoints

A segment endpoint is a point on a [=gap's=] centerline where a gap decoration segment may start or end. There are two endpoint types:

start segment endpoint: Point closest to the [=start=] side of the [=gap=].
end segment endpoint: Point closest to the [=end=] side of the [=gap=].

To create segment endpoints for a gap |G|:

Bounds of a Gap:
Create endpoints at |G|'s two bounds:
- At the centerpoint of |G|'s start edge, create a start segment endpoint.
- At the centerpoint of |G|'s end edge, create an end segment endpoint.
When a gap runs to the content boundary, these endpoints coincide with the corresponding content edge.
Within a Gap:
A gap junction is a region of |G| where one or more [=gaps=] abut or overlap |G|. Two [=segment endpoints=] are created for each [=gap junction=]:
- Entering a [=gap junction=]: At the point where a cross gap appears on at least one side of |G|, create an end segment endpoint.
- Exiting a [=gap junction=]: At the point where no cross gap exists on either side of |G|, create a start segment endpoint.
This ordering (end segment endpoint, start segment endpoint) reflects that the [=gap junction=] corresponds to the end of one track/item/column and the beginning of another.

The following examples illustrate the locations of segment endpoints, with a purple + for start segment endpoints and a green + for end segment endpoints in each case. [=Gap junctions=] are shown with a dashed box.

			.grid-with-spans {
			  display: grid;
			  grid-template: repeat(4, 100px) / repeat(4, 100px);
			  gap: 20px;
			  background: rgb(255 255 128);
			}
			.grid > * {
			  border: 1px dashed black;
			}

Locations of segment endpoints and [=gap junctions=] in a grid with spanning items. [=Segment endpoints=] are created at the bounds of each gap (which coincide with the edges of the container), and within each gap in an end-start manner where the row and column gaps overlap.

			.flex {
			  display: flex;
			  flex-wrap: wrap;
			  gap: 20px;
			  width: 500px;
			  background: rgb(255 255 128);
			}
			.flex > * {
			  border: 1px dashed black;
			}

Locations of segment endpoints and [=gap junctions=] in a flex container. Column gaps create endpoints at their bounds; some bounds coincide with the container edges (like the start of the gaps between #1 and #2, and #2 and #3 which coincide with the top edge of the container, and the end of the gap between #7 and #8 which coincides with the bottom edge of the container). Row gaps (between flex lines) create endpoints at their bounds, which coincide with the left and right edges of the container. Where column gaps abut row gaps, two endpoints are created in an end-start manner.

			.multi-column {
			  column-count: 3;
			  column-width: 100px;
			  column-height: 50px;
			  column-wrap: wrap;
			  gap: 20px;
			  background: rgb(255 255 128);
			}

			.multi-column > * {
			  height: 100px;
			  border: 1px dashed black;
			}

Locations of segment endpoints and [=gap junctions=] in a multi-column container. Column gaps (between column boxes) create endpoints at their bounds; some bounds coincide with the container edges (like the starts of the first 2 column gaps which coincide with the top edge, and the ends of the last 2 column gaps which coincide with the bottom edge). The row gap (between rows of column boxes) creates endpoints at its bounds, which coincide with the left and right edges of the container. Where column gaps abut the row gap, two endpoints are created in an end-start manner.

Gap decoration segments

Definitions

A gap decoration segment is formed by pairing a [=start segment endpoint=] with an [=end segment endpoint=]. Each [=gap=] forms a collection of [=gap decoration segments=]. In this section, we represent a [=gap decoration segment=] |s| as |s| = [|s|.start, |s|.end], where |s|.start is the start segment endpoint of the segment, and |s|.end is the end segment endpoint of the segment. Let UNION(|s1|, |s2|) be equal to [|s1|.start, |s2|.end]. A [=gap decoration segment=] is flanked by spanning items if, for every [=gap junction=] between its endpoints, there exist items on opposing sides of the gap that span across all perpendicular [=gaps=] contributing to that junction. In the context of a given [=gap=], a pair of segment endpoints |a| and |b| is considered discontiguous if a line segment from |a| to |b|, with the same width as the [=gap=], intersects a child item in the container.

Algorithms

To determine gap decoration segments for a given [=gap=] |G|:

Let |S| be an empty list.
Let |endpoints| be the result of [=creating segment endpoints=] for |G|, ordered by their position along |G|'s centerline from start to end. Note: This list is guaranteed to contain an even number of elements that strictly alternate between [=start segment endpoint=] and [=end segment endpoint=], beginning with a [=start segment endpoint=].
If |endpoints| is empty, return |S|.
Let |break| be the used value of either 'column-rule-break' or 'row-rule-break', whichever applies to the gap.
If |break| is ''column-rule-break/none'':
1. Let |first| be the first item in |endpoints|.
2. Let |last| be the last item in |endpoints|.
3. Create a [=gap decoration segment=] |segment| = [|first|, |last|].
4. [=Apply offsets to a segment|Apply offsets to=] |segment|, then append it to |S|.
5. Return |S|.
Empty Check: If |endpoints| is empty, return |S|.
Create a [=gap decoration segment=] |s| from the first two items in |endpoints|. Remove them both from the list.
If |s|'s endpoints are discontiguous, go back to Empty Check.
While |endpoints| is not empty:
1. Create a [=gap decoration segment=] |next| from the first two items in |endpoints|, leaving them both in the list.
2. Let |candidate| be UNION(|s|, |next|).
3. If |candidate|'s endpoints are discontiguous, exit this loop.
4. If |break| is ''column-rule-break/intersection'' and |candidate| is not flanked by spanning items, exit this loop.
5. Remove the first two items from |endpoints|.
6. Set |s| to UNION(|s|, |next|).
[=Apply offsets to a segment|Apply offsets to=] |s|, then append it to |S|.
Go back to Empty Check.

To apply offsets to a segment |s| = [|start|, |end|]:

Offset |start| by the used value of the applicable [[#inset|rule-inset]] property.
Offset |end| by the used value of the applicable [[#inset|rule-inset]] property.
Update |s| with the adjusted [|start|, |end|].

Illustration of gap decoration segments (blue and red rectangles) in a grid container. The segments are drawn between pairs of segment endpoints, with start segment endpoints marked with purple crosses and end segment endpoints marked with green crosses.

Illustration of gap decoration segments (blue and red rectangles) in a flex container. The segments are drawn between pairs of segment endpoints, with start segment endpoints marked with purple crosses and end segment endpoints marked with green crosses.

Illustration of gap decoration segments (blue and red rectangles) in a multicol container (with column-wrap: wrap). The segments are drawn between pairs of segment endpoints, with start segment endpoints marked with purple crosses and end segment endpoints marked with green crosses.

flex/flex-gap-decorations-001.html flex/flex-gap-decorations-006.html flex/flex-gap-decorations-007.html flex/flex-gap-decorations-008.html flex/flex-gap-decorations-015.html flex/flex-gap-decorations-016.html flex/flex-gap-decorations-020.html flex/flex-gap-decorations-021.html flex/flex-gap-decorations-022.html flex/flex-gap-decorations-023.html flex/flex-gap-decorations-024.html flex/flex-gap-decorations-025.html flex/flex-gap-decorations-026-crash.html flex/flex-gap-decorations-027.html flex/flex-gap-decorations-032.html flex/flex-gap-decorations-033.html flex/flex-gap-decorations-039.html flex/flex-gap-decorations-040.html flex/flex-gap-decorations-041.html flex/flex-gap-decorations-042.html flex/flex-gap-decorations-043.html flex/flex-gap-decorations-044.html flex/flex-gap-decorations-045.html flex/flex-gap-decorations-046.html flex/flex-gap-decorations-047.html flex/flex-gap-decorations-048.html flex/flex-gap-decorations-049.html flex/flex-gap-decorations-056.html flex/flex-gap-decorations-057.html flex/flex-gap-decorations-058.html flex/flex-gap-decorations-059.html flex/flex-gap-decorations-060.html flex/flex-gap-decorations-061.html flex/flex-gap-decorations-repaint-on-child-resize.html grid/grid-gap-decorations-001.html grid/grid-gap-decorations-029.html grid/grid-gap-decorations-030.html grid/grid-gap-decorations-031.html grid/grid-gap-decorations-032.html grid/grid-gap-decorations-033.html grid/grid-gap-decorations-034.html grid/grid-gap-decorations-035.html grid/grid-gap-decorations-036.html grid/grid-gap-decorations-037.html grid/grid-gap-decorations-041-crash.html grid/grid-gap-decorations-042.html grid/grid-gap-decorations-043-crash.html grid/grid-gap-decorations-044-crash.html grid/grid-gap-decorations-045.html grid/grid-gap-decorations-046.html grid/grid-gap-decorations-047.html grid/grid-gap-decorations-066.html grid/grid-gap-decorations-repaint-on-child-resize.html grid/grid-gap-decorations-repaint-on-item-position-change.html grid/grid-gap-decorations-repaint-on-item-span-change.html grid/subgrid/subgrid-gap-decorations-001.html grid/subgrid/subgrid-gap-decorations-002.html grid/subgrid/subgrid-gap-decorations-003.html grid/subgrid/subgrid-gap-decorations-009.html grid/subgrid/subgrid-gap-decorations-010.html grid/subgrid/subgrid-gap-decorations-011.html grid/subgrid/subgrid-gap-decorations-012.html grid/subgrid/subgrid-gap-decorations-013.html grid/subgrid/subgrid-gap-decorations-014.html grid/subgrid/subgrid-gap-decorations-015.html grid/subgrid/subgrid-gap-decorations-016.html grid/subgrid/subgrid-gap-decorations-018.html multicol/multicol-gap-decorations-001.html multicol/multicol-gap-decorations-002.html multicol/multicol-gap-decorations-003.html multicol/multicol-gap-decorations-005.html multicol/multicol-gap-decorations-006.html multicol/multicol-gap-decorations-007.html multicol/multicol-gap-decorations-013.html multicol/multicol-gap-decorations-015.html multicol/multicol-gap-decorations-016.html multicol/multicol-gap-decorations-018.html multicol/multicol-gap-decorations-024.html multicol/multicol-gap-decorations-repaint-on-content-resize.html

Break behaviors at intersections: The 'column-rule-break', 'row-rule-break', and 'rule-break' properties

		Name: column-rule-break, row-rule-break
		Value: ''none'' | ''normal'' | ''intersection''
		Initial: ''normal''
		Applies to: grid containers, flex containers, multicol containers, and grid lanes containers
		Inherited: no
		Animation type: discrete

These properties set the behavior for breaking decorations within a given gap into segments at visible "T" or "cross" intersections formed by items in the container. Precise details for how to apply these values are given in the steps to [=determine gap decoration segments=].

none

Gap decorations do not start or end at visible "T" or "cross" intersections. Instead, a single continuous decoration is painted from one end of the gap to the other.

normal

Behavior depends on the type of container.

Grid containers: Gap decorations start and end at visible "T" intersections but continue through visible "cross" intersections.
Flex containers: Behaves the same as ''column-rule-break/none''.
Multicol containers: On 'column-rule-break', behaves the same as ''column-rule-break/intersection''. On 'row-rule-break', behaves the same as ''row-rule-break/none''.

intersection

Gap decorations start and end at visible "T" and "cross" intersections.

flex/flex-gap-decorations-009.html flex/flex-gap-decorations-010.html flex/flex-gap-decorations-028.html flex/flex-gap-decorations-031.html flex/flex-gap-decorations-034.html flex/flex-gap-decorations-035.html flex/flex-gap-decorations-036.html flex/flex-gap-decorations-037.html flex/flex-gap-decorations-050.html flex/flex-gap-decorations-051.html flex/flex-gap-decorations-052.html grid/grid-gap-decorations-006.html grid/grid-gap-decorations-007.html grid/grid-gap-decorations-008.html grid/grid-gap-decorations-009.html grid/grid-gap-decorations-040.html grid/subgrid/subgrid-gap-decorations-004.html grid/subgrid/subgrid-gap-decorations-005.html grid/subgrid/subgrid-gap-decorations-006.html multicol/multicol-gap-decorations-014.html multicol/multicol-gap-decorations-020.html multicol/multicol-gap-decorations-025.html multicol/multicol-gap-decorations-026.html

		Name: rule-break
		Value: <<'column-rule-break'>>
		Applies to: Same as 'column-rule-break' and 'row-rule-break'

This [=shorthand property=] sets 'column-rule-break' and 'row-rule-break' to the same value. parsing/rule-break-computed.html parsing/rule-break-invalid.html parsing/rule-break-shorthand.html parsing/rule-break-valid.html The following examples illustrate various settings for the *-rule-break properties.

			.break-normal-grid {
				display: grid;
				grid-template: repeat(4, 100px) / repeat(4, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: normal;
			}

Default break behavior for [=gap decorations=] in a grid. Each decoration stops when it encounters an item spanning across the gap.

			.break-none-grid {
				display: grid;
				grid-template: repeat(4, 100px) / repeat(4, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: none;
			}

Grid gap decorations with no breaks. Note that the gap decorations extend "behind" items placed in the grid.

			.break-intersection-grid {
				display: grid;
				grid-template: repeat(4, 100px) / repeat(4, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: intersection;
			}

Grid gap decorations contained within each [=gap decoration segment=] that is not flanked by spanning items on opposing sides.

			.break-normal-multicol {
				column-width: 150px;
				column-height: 300px;
				gap: 1em;
				row-rule: 4px solid red;
				column-rule: 4px solid blue;
				rule-break: normal;
			}

Multicol [=gap decorations=] with rule-break set to ''column-rule-break/normal''. Note that in the column direction it behaves as if rule-break were set to ''intersection'', while in the row direction it behaves as if rule-break were set to ''none''.

			.break-intersection-multicol {
				column-width: 150px;
				column-height: 300px;
				gap: 1em;
				row-rule: 4px solid red;
				column-rule: 4px solid blue;
				rule-break: intersection;
			}

Multicol gap decorations with rule-break set to ''intersection''.

			.break-normal-flex {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: normal;
			}

Default break behavior for [=gap decorations=] in a flex container.

Note that each flex line has its own distinct [=gaps=] between items. This has two implications:

[=Gap decorations=] in adjacent flex lines are separate from each other even if the gaps happen to line up.
''column-rule-break/none'' would have the same visual effect as ''column-rule-break/normal''.

			.break-intersection-flex {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;
				width: 500px;
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: intersection;
			}

Flexbox gap decorations contained within each [=gap decoration segment=].

Adjusting gap decoration endpoints: The 'rule-inset' properties

		Name: column-rule-edge-inset-start, column-rule-edge-inset-end, column-rule-interior-inset-start, column-rule-interior-inset-end, row-rule-edge-inset-start, row-rule-edge-inset-end, row-rule-interior-inset-start, row-rule-interior-inset-end
		Value: <>
		Initial: ''0''
		Applies to: grid containers, flex containers, multicol containers, and grid lanes containers
		Inherited: no
		Percentages: refer to the crossing gap width
		Animation type: by computed value type

These properties can be used to offset the start and end points of gap decorations relative to the segment endpoints which would normally determine where decorations start and end.

An edge segment endpoint is any [=segment endpoint=] created at the content edges of the container.

An interior segment endpoint is any [=segment endpoint=] created at a [=gap junction=].

Percentages are resolved against the crossing gap width, defined as follows:

Edge segment endpoints: The [=crossing gap width=] is ''0''.
Interior segment endpoints: The [=crossing gap width=] is the size of the [=gap junction=] in the same dimension as the [=gap=] in which the [=segment endpoint=] lies (the row dimension for [=row gaps=] and the column dimension for [=column gaps=]). Note: Typically, this will be the used value of the 'column-gap' or 'row-gap' property, whichever applies to the intersecting or abutting gap, plus any additional spacing added due to 'justify-content' or 'align-content'. However, in cases where [=gaps=] intersect or abut one another at overlapping intervals, the [=crossing gap width=] will be determined by the union of such intervals. See this example for one such case.

The 'column-rule-edge-inset-start' and 'row-rule-edge-inset-start' properties apply to [=start segment endpoints=] that are [=edge segment endpoints=]. The 'column-rule-interior-inset-start' and 'row-rule-interior-inset-start' properties apply to [=start segment endpoints=] that are [=interior segment endpoints=]. For these properties, positive values offset in the [=end=] direction, and negative values offset in the [=start=] direction, along the axis of the gap.

The 'column-rule-edge-inset-end' and 'row-rule-edge-inset-end' properties apply to [=end segment endpoints=] that are [=edge segment endpoints=]. The 'column-rule-interior-inset-end' and 'row-rule-interior-inset-end' properties apply to [=end segment endpoints=] that are [=interior segment endpoints=]. For these properties, positive values offset in the [=start=] direction, and negative values offset in the [=end=] direction, along the axis of the gap.

			.inset-end {
				row-rule: 3px solid red;
				row-rule-break: intersection;
				row-rule-inset-end: 10px;
			}

Row-direction decorations with asymmetric insets in LTR and RTL directions and vertical writing-mode.

parsing/rule-edge-start-end-inset-computed.html parsing/rule-edge-start-end-inset-invalid.html parsing/rule-interior-start-end-inset-computed.html parsing/rule-interior-start-end-inset-invalid.html flex/flex-gap-decorations-011.html flex/flex-gap-decorations-013.html flex/flex-gap-decorations-014.html flex/flex-gap-decorations-029.html flex/flex-gap-decorations-030.html flex/flex-gap-decorations-053.html flex/flex-gap-decorations-054.html flex/flex-gap-decorations-055.html flex/flex-gap-decorations-063.html flex/flex-gap-decorations-064.html grid/grid-gap-decorations-010.html grid/grid-gap-decorations-011.html grid/grid-gap-decorations-012.html grid/grid-gap-decorations-013.html grid/grid-gap-decorations-014.html grid/grid-gap-decorations-015.html grid/grid-gap-decorations-038.html grid/grid-gap-decorations-052.html grid/grid-gap-decorations-053.html grid/grid-gap-decorations-067.html grid/grid-gap-decorations-068.html grid/grid-gap-decorations-069.html grid/grid-gap-decorations-070.html grid/grid-gap-decorations-071.html grid/grid-gap-decorations-072.html grid/grid-gap-decorations-073.html grid/grid-gap-decorations-074.html grid/grid-gap-decorations-075.html grid/grid-gap-decorations-076.html grid/subgrid/subgrid-gap-decorations-007.html grid/subgrid/subgrid-gap-decorations-008.html multicol/multicol-gap-decorations-008.html multicol/multicol-gap-decorations-009.html multicol/multicol-gap-decorations-010.html multicol/multicol-gap-decorations-011.html multicol/multicol-gap-decorations-012.html multicol/multicol-gap-decorations-017.html multicol/multicol-gap-decorations-022.html multicol/multicol-gap-decorations-023.html multicol/multicol-gap-decorations-033.html

''-start'' and ''-end'' shorthands

These shorthands allow authors to achieve uniform asymmetric decorations.

			.inset-start-8px-end-0px {
				column-rule-inset-start: 8px;
				column-rule-inset-end: 0px;
			}

A start inset of ''8px'' recedes the starts of [=gap decorations=], while an end inset of ''0px'' aligns the ends of [=gap decorations=] with content edges.

		Name: column-rule-inset-start, column-rule-inset-end, row-rule-inset-start, row-rule-inset-end
		Value: <>
		Applies to: Same as 'column-rule-edge-inset-start', 'column-rule-interior-inset-start', 'column-rule-edge-inset-end', 'column-rule-interior-inset-end', 'row-rule-edge-inset-start', 'row-rule-interior-inset-start', 'row-rule-edge-inset-end', and 'row-rule-interior-inset-end'

These [=shorthand properties=] set the corresponding ''-edge-'' and ''-interior-'' properties to the same value. For example, 'column-rule-inset-start' sets both 'column-rule-edge-inset-start' and 'column-rule-interior-inset-start' to the same value.

		Name: rule-inset-start
		Value: <<'column-rule-inset-start'>>
		Applies to: Same as 'column-rule-inset-start' and 'row-rule-inset-start'

This [=shorthand property=] sets 'column-rule-inset-start' and 'row-rule-inset-start' to the same value.

		Name: rule-inset-end
		Value: <<'column-rule-inset-end'>>
		Applies to: Same as 'column-rule-inset-end' and 'row-rule-inset-end'

This [=shorthand property=] sets 'column-rule-inset-end' and 'row-rule-inset-end' to the same value. parsing/rule-inset-start-end-bidirectional-shorthand.html parsing/rule-inset-start-end-computed.html parsing/rule-inset-start-end-invalid.html parsing/rule-inset-start-end-shorthand.html parsing/rule-inset-start-end-valid.html

''-edge-'' and ''-interior-'' shorthands

These shorthands allow authors to achieve different treatments at edge versus interior intersections.

			.inset-edge-0px-interior-negative-5px {
				column-rule-edge-inset: 0px;
				column-rule-interior-inset: -5px;
				column-rule-break: intersection;
			}

An interior inset of ''-5px'' extends the endpoints of interior gap decorations slightly beyond the edges of adjacent items. An edge inset of ''0px'' aligns the endpoints of edge gap decorations with the content edges.

		Name: column-rule-edge-inset, column-rule-interior-inset, row-rule-edge-inset, row-rule-interior-inset
		Value: <> [ <> ]?
		Applies to: Same as 'column-rule-edge-inset-start', 'column-rule-edge-inset-end', 'column-rule-interior-inset-start', 'column-rule-interior-inset-end', 'row-rule-edge-inset-start', 'row-rule-edge-inset-end', 'row-rule-interior-inset-start', and 'row-rule-interior-inset-end'

These shorthands set the corresponding ''-start'' and ''-end'' properties. For example, 'column-rule-edge-inset' sets both 'column-rule-edge-inset-start' and 'column-rule-edge-inset-end'. If one value is specified, both properties are set to that value. If two values are specified, ''-start'' is set to the first and ''-end'' is set to the second.

		Name: rule-edge-inset
		Value: <<'column-rule-edge-inset'>>
		Applies to: Same as 'column-rule-edge-inset' and 'row-rule-edge-inset'

This [=shorthand property=] sets 'column-rule-edge-inset' and 'row-rule-edge-inset' to the same value.

		Name: rule-interior-inset
		Value: <<'column-rule-interior-inset'>>
		Applies to: Same as 'column-rule-interior-inset' and 'row-rule-interior-inset'

This [=shorthand property=] sets 'column-rule-interior-inset' and 'row-rule-interior-inset' to the same value. parsing/rule-edge-inset-bidirectional-shorthand.html parsing/rule-edge-interior-inset-computed.html parsing/rule-edge-interior-inset-invalid.html parsing/rule-edge-interior-inset-shorthand.html parsing/rule-edge-interior-inset-valid.html parsing/rule-interior-inset-bidirectional-shorthand.html

Universal shorthands

These shorthands allow authors to achieve uniform treatments throughout a container.

			.inset-0px {
				column-rule-inset: 0px;
				column-rule-break: intersection;
			}

An inset of ''0px'' aligns the ends of gap decorations with adjacent items.

			.inset-positive-5px {
				column-rule-inset: 5px;
				column-rule-break: intersection;
			}

An inset of ''5px'' shortens the ends of gap decorations relative to the edges of adjacent items.

			.inset-negative-5px {
				column-rule-inset: -5px;
				column-rule-break: intersection;
			}

An inset of ''-5px'' extends the ends of gap decorations slightly beyond the edges of adjacent items.

			.inset-negative-50percent {
				column-rule-inset: -50%;
				column-rule-break: intersection;
			}

An inset of ''-50%'' extends each end of a gap decoration halfway into its intersection. Neighboring gap decorations "meet in the middle" to create a continuous line. Note that at the edges of the container, the crossing gap width is defined to be ''0'', so the inset value of ''-50%'' resolves to ''0'' and thus the gap decoration does not extend beyond the bounds of the container. (Contrast with the previous example, which specified an inset in ''px'' units.)

		Name: column-rule-inset, row-rule-inset
		Value: <<'column-rule-edge-inset'>> [ / <<'column-rule-interior-inset'>> ]?
		Applies to: Same as 'column-rule-edge-inset', 'column-rule-interior-inset', 'row-rule-edge-inset', and 'row-rule-interior-inset'

These shorthands set the corresponding edge and interior start and end values. The order of values is:

		edge-start edge-end? [/ interior-start interior-end?]?

Omitted values are filled in as follows:

If the interior values are omitted, they are copied from the edge values.
Any omitted end value is copied from the corresponding start value.

		Name: rule-inset
		Value: <<'column-rule-inset'>>
		Applies to: Same as 'column-rule-inset' and 'row-rule-inset'

This [=shorthand property=] sets 'column-rule-inset' and 'row-rule-inset' to the same value. parsing/rule-inset-bidirectional-shorthand.html parsing/rule-inset-computed.html parsing/rule-inset-invalid.html parsing/rule-inset-shorthand.html parsing/rule-inset-valid.html

Gap decoration visibility: The 'rule-visibility-items' properties

		Name: column-rule-visibility-items, row-rule-visibility-items
		Value: ''all'' | ''around'' | ''between'' | ''normal''
		Initial: ''normal''
		Applies to: [=grid containers=] and [=multicol containers=]
		Inherited: no
		Computed value: as specified
		Animation type: discrete

These properties control whether a [=gap decoration segment=] is painted in portions of [=gaps=] adjacent to empty areas.

all

Paint decorations in all gap segments, regardless of whether adjacent items are present.

around

Paint decorations in a gap segment if at least one of the two adjacent areas is occupied by an item.

between

Paint decorations in a gap segment if both adjacent areas are occupied by items.

normal

Behavior depends on the type of container.

[=Grid containers=]: Behaves the same as ''all''.
[=Multicol containers=]: On 'column-rule-visibility-items', behaves the same as ''column-rule-visibility-items/between''. On 'row-rule-visibility-items', behaves the same as ''row-rule-visibility-items/all''.

		Name: rule-visibility-items
		Value: <<'column-rule-visibility-items'>>
		Applies to: Same as 'column-rule-visibility-items' and 'row-rule-visibility-items'

This [=shorthand property=] sets 'column-rule-visibility-items' and 'row-rule-visibility-items' to the same value.

			.break-normal-with-all-grid {
				display: grid;
				grid-template: repeat(3, 100px) / repeat(3, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-visibility-items: all;
			}

Gap decorations in Grid with ''column-rule-break/normal'' rule breaking and ''column-rule-visibility-items/all'' visibility.

			.break-normal-with-around-grid {
				display: grid;
				grid-template: repeat(3, 100px) / repeat(3, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-visibility-items: around;
			}

Gap decorations in Grid with ''column-rule-break/normal'' rule breaking and ''column-rule-visibility-items/around'' visibility.

			.break-normal-with-between-grid {
				display: grid;
				grid-template: repeat(3, 100px) / repeat(3, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-visibility-items: between;
			}

Gap decorations in Grid with ''column-rule-break/normal'' rule breaking and ''column-rule-visibility-items/between'' visibility.

grid/grid-gap-decorations-054.html grid/grid-gap-decorations-055.html grid/grid-gap-decorations-056.html grid/grid-gap-decorations-057.html grid/grid-gap-decorations-064.html grid/grid-gap-decorations-065.html grid/fragmentation/grid-gap-decorations-fragmentation-025.html grid/fragmentation/grid-gap-decorations-fragmentation-026.html grid/fragmentation/grid-gap-decorations-fragmentation-027.html grid/subgrid/subgrid-gap-decorations-019.html grid/subgrid/subgrid-gap-decorations-020.html grid/subgrid/subgrid-gap-decorations-021.html grid/subgrid/subgrid-gap-decorations-022.html grid/subgrid/subgrid-gap-decorations-023.html grid/subgrid/subgrid-gap-decorations-024.html grid/subgrid/subgrid-gap-decorations-025.html multicol/multicol-gap-decorations-027.html multicol/multicol-gap-decorations-028.html multicol/multicol-gap-decorations-029.html multicol/multicol-gap-decorations-030.html multicol/multicol-gap-decorations-031.html multicol/multicol-gap-decorations-032.html parsing/rule-visibility-items-computed.html parsing/rule-visibility-items-invalid.html parsing/rule-visibility-items-shorthand.html parsing/rule-visibility-items-valid.html

Gap decoration overlap: The 'rule-overlap' property

		Name: rule-overlap
		Value: ''row-over-column'' | ''column-over-row''
		Initial: ''row-over-column''
		Applies to: grid containers, flex containers, and grid lanes containers
		Inherited: no
		Animation type: discrete

This property sets the paint order for overlapping gap decorations.

row-over-column: Row-direction decorations are painted above column-direction decorations.
column-over-row: Column-direction decorations are painted above row-direction decorations.

			.row-over-column {
				rule-overlap: row-over-column;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
			}

			.column-over-row {
				rule-overlap: column-over-row;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
			}

flex/flex-gap-decorations-012.html grid/grid-gap-decorations-023.html grid/subgrid/subgrid-gap-decorations-017.html parsing/rule-overlap-computed.html parsing/rule-overlap-invalid.html parsing/rule-overlap-valid.html

Fragmentation

[[css-align-3#column-row-gap]] specifies that gaps disappear where they coincide with a [=fragmentation break=]. Because there is no gap in such locations, no [=gap decoration=] is drawn in them either. flex/fragmentation/flex-gap-decorations-fragmentation-001.html flex/fragmentation/flex-gap-decorations-fragmentation-002.html flex/fragmentation/flex-gap-decorations-fragmentation-003.html flex/fragmentation/flex-gap-decorations-fragmentation-004.html flex/fragmentation/flex-gap-decorations-fragmentation-005.html flex/fragmentation/flex-gap-decorations-fragmentation-006.html flex/fragmentation/flex-gap-decorations-fragmentation-007.html flex/fragmentation/flex-gap-decorations-fragmentation-008.html flex/fragmentation/flex-gap-decorations-fragmentation-009.html flex/fragmentation/flex-gap-decorations-fragmentation-010.html flex/fragmentation/flex-gap-decorations-fragmentation-011.html flex/fragmentation/flex-gap-decorations-fragmentation-012.html flex/fragmentation/flex-gap-decorations-fragmentation-013.html flex/fragmentation/flex-gap-decorations-fragmentation-014.html flex/fragmentation/flex-gap-decorations-fragmentation-015.html flex/fragmentation/flex-gap-decorations-fragmentation-016.html flex/fragmentation/flex-gap-decorations-fragmentation-017.html flex/fragmentation/flex-gap-decorations-fragmentation-018.html flex/fragmentation/flex-gap-decorations-fragmentation-019.html flex/fragmentation/flex-gap-decorations-fragmentation-020.html flex/fragmentation/flex-gap-decorations-fragmentation-021.html grid/fragmentation/grid-gap-decorations-fragmentation-001.html grid/fragmentation/grid-gap-decorations-fragmentation-002.html grid/fragmentation/grid-gap-decorations-fragmentation-003.html grid/fragmentation/grid-gap-decorations-fragmentation-004.html grid/fragmentation/grid-gap-decorations-fragmentation-005.html grid/fragmentation/grid-gap-decorations-fragmentation-006.html grid/fragmentation/grid-gap-decorations-fragmentation-007.html grid/fragmentation/grid-gap-decorations-fragmentation-008.html grid/fragmentation/grid-gap-decorations-fragmentation-009.html grid/fragmentation/grid-gap-decorations-fragmentation-010.html grid/fragmentation/grid-gap-decorations-fragmentation-011.html grid/fragmentation/grid-gap-decorations-fragmentation-012.html grid/fragmentation/grid-gap-decorations-fragmentation-013.html grid/fragmentation/grid-gap-decorations-fragmentation-014.html grid/fragmentation/grid-gap-decorations-fragmentation-015.html grid/fragmentation/grid-gap-decorations-fragmentation-016.html grid/fragmentation/grid-gap-decorations-fragmentation-017.html grid/fragmentation/grid-gap-decorations-fragmentation-018-crash.html grid/fragmentation/grid-gap-decorations-fragmentation-019-crash.html grid/fragmentation/grid-gap-decorations-fragmentation-020.html grid/fragmentation/grid-gap-decorations-fragmentation-021.html grid/fragmentation/grid-gap-decorations-fragmentation-022.html grid/fragmentation/grid-gap-decorations-fragmentation-023.html grid/fragmentation/grid-gap-decorations-fragmentation-024.html grid/fragmentation/grid-gap-decorations-fragmentation-025.html grid/fragmentation/grid-gap-decorations-fragmentation-026.html grid/fragmentation/grid-gap-decorations-fragmentation-027.html grid/fragmentation/grid-gap-decorations-fragmentation-028.html grid/fragmentation/grid-gap-decorations-fragmentation-029.html grid/fragmentation/grid-gap-decorations-fragmentation-030.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-001.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-002.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-003.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-004.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-005.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-006.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-007.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-008.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-009.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-010.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-011.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-012.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-013.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-014.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-015.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-016.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-017.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-018.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-019.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-020.html grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-021.html

Color, style, and width

Property definitions in this section supersede the definitions of properties with the same names in [[CSS-MULTICOL-1]].

Gap decoration color: The 'column-rule-color', 'row-rule-color', and 'rule-color' properties

		Name: column-rule-color, row-rule-color
		Value: <> | <>
		Initial: currentcolor
		Applies to: grid containers, flex containers, multicol containers, and grid lanes containers
		Inherited: no
		Animation type: repeatable list, see [[#interpolation-behavior]].

		<line-color-list>          = <>#

	<auto-line-color-list>     = <>#? ,
											         <> ,
											         <>#?

	<line-color-or-repeat>     = [ <> | <> ]

	<repeat-line-color>        = repeat( [ <> ] , [ <> ]# )

	<auto-repeat-line-color>   = repeat( auto , [ <> ]# )

These properties set the color of gap decorations.

		Name: rule-color
		Value: <<'column-rule-color'>>
		Inherited: no
		Applies to: Same as 'column-rule-color' and 'row-rule-color'

This [=shorthand property=] sets 'column-rule-color' and 'row-rule-color' to the same value. agnostic/gap-decorations-003.html agnostic/gap-decorations-004.html agnostic/gap-decorations-010-crash.html grid/grid-gap-decorations-022.html grid/grid-gap-decorations-024.html grid/grid-gap-decorations-025.html grid/grid-gap-decorations-026.html grid/grid-gap-decorations-027.html grid/grid-gap-decorations-028.html grid/grid-gap-decorations-048.html grid/grid-gap-decorations-049.html grid/grid-gap-decorations-050.html grid/grid-gap-decorations-051.html multicol/multicol-gap-decorations-019.html parsing/gap-decorations-color-computed.html parsing/gap-decorations-color-invalid.html parsing/gap-decorations-color-valid.html

Gap decoration style: The 'column-rule-style', 'row-rule-style', and 'rule-style' properties

		Name: column-rule-style, row-rule-style
		Value: <> | <>
		Initial: none
		Applies to: grid containers, flex containers, multicol containers, and grid lanes containers
		Inherited: no
		Animation type: discrete

		<line-style-list>          = <>#

	<auto-line-style-list>     = <>#? ,
											         <> ,
											         <>#?

	<line-style-or-repeat>     = [ <> | <> ]

	<repeat-line-style>        = repeat( [ <> ] , [ <> ]# )

	<auto-repeat-line-style>   = repeat( auto , [ <> ]# )

These properties set the styles of gap decorations. The <> values apply the same as for 'border-style'.

		Name: rule-style
		Value: <<'column-rule-style'>>
		Inherited: no
		Applies to: Same as 'column-rule-style' and 'row-rule-style'

This [=shorthand property=] sets 'column-rule-style' and 'row-rule-style' to the same value. flex/flex-gap-decorations-002.html flex/flex-gap-decorations-003.html flex/flex-gap-decorations-004.html flex/flex-gap-decorations-005.html flex/flex-gap-decorations-017.html flex/flex-gap-decorations-018.html grid/grid-gap-decorations-002.html grid/grid-gap-decorations-003.html grid/grid-gap-decorations-004.html grid/grid-gap-decorations-005.html grid/grid-gap-decorations-016.html grid/grid-gap-decorations-017.html grid/grid-gap-decorations-020.html grid/grid-gap-decorations-021.html grid/grid-gap-decorations-039.html parsing/gap-decorations-style-computed.html parsing/gap-decorations-style-invalid.html parsing/gap-decorations-style-valid.html

Gap decoration width: The 'column-rule-width', 'row-rule-width', and 'rule-width' properties

		Name: column-rule-width, row-rule-width
		Value: <> | <>
		Initial: medium
		Applies to: grid containers, flex containers, multicol containers, and grid lanes containers
		Inherited: no
		Computed value: list of absolute lengths, snapped as a border width
		Animation type: repeatable list, see [[#interpolation-behavior]].

		<line-width-list>          = <>#

		<auto-line-width-list>     = <>#? ,
											           <> ,
											           <>#?

		<line-width-or-repeat>     = [ <> | <> ]

		<repeat-line-width>        = repeat( [ <> ] , [ <> ]# )

		<auto-repeat-line-width>   = repeat( auto , [ <> ]# )

These properties set the widths of gap decorations. Negative values are not allowed.

		Name: rule-width
		Value: <<'column-rule-width'>>
		Inherited: no
		Applies to: Same as 'column-rule-width' and 'row-rule-width'

This [=shorthand property=] sets 'column-rule-width' and 'row-rule-width' to the same value. agnostic/gap-decorations-009-crash.html grid/grid-gap-decorations-018.html grid/grid-gap-decorations-019.html multicol/multicol-gap-decorations-004.html parsing/gap-decorations-col-rule-width.html parsing/gap-decorations-width-computed.html parsing/gap-decorations-width-invalid.html parsing/gap-decorations-width-valid.html

Gap decoration shorthands: The 'column-rule', 'row-rule', and 'rule' properties

		Name: column-rule, row-rule
		Value: <> | <>

		<gap-rule-list>        = <>#

		<gap-auto-rule-list>   = <>#? ,
								             <> ,
								             <>#?

		<gap-rule-or-repeat>   = <> | <>

		<gap-repeat-rule>      = repeat( <> , <># )

		<gap-auto-repeat-rule> = repeat( auto , <># )

		<gap-rule>             = <> || <> || <>

These [=shorthand properties=] set values for the 'column-rule-width', 'column-rule-style', and 'column-rule-color' properties, or the 'row-rule-width', 'row-rule-style', and 'row-rule-color' properties, respectively.

		Name: rule
		Value: <<'column-rule'>>
		Inherited: no
		Applies to: Same as 'column-rule' and 'row-rule'

This [=shorthand property=] sets 'column-rule' and 'row-rule' to the same values. flex/flex-gap-decorations-019.html parsing/gap-decorations-bidirectional-shorthands.html parsing/gap-decorations-rule-initial-value-crash.html parsing/gap-decorations-rule-shorthand-computed.html parsing/gap-decorations-rule-shorthand-invalid.html parsing/gap-decorations-rule-shorthand-valid.html parsing/gap-decorations-rule-shorthand.html

Lists of values and the ''repeat()'' notation

Each of the properties in this section accepts a comma-separated list of values. Setting multiple values in this way allows for varying gap decorations within a given container.

An author might specify alternating red and blue column rules as follows:

			column-rule-width: 1px;
			column-rule-style: solid;
			column-rule-color: red, blue;

Such a list may contain repeat() notations. Similar to [[css-grid-1#repeat-notation]], these notations allow a series of gap decorations that exhibit a recurring pattern to be written in a more compact form. The generic form of the ''repeat()'' syntax is, approximately,

		repeat( [ <> | auto ] , <value># )

The first argument to ''repeat()'' specifies the number of repetitions.

<>

Specifies an integer repeater. An integer repeater expands out to the list of values in the second argument, repeated as many times as specified by the first argument.

An author may write:

					column-rule-color: gray, red, blue, red, blue, red, blue, gray;

Or shorten to the following, which produces the same sequence of colors:

					column-rule-color: gray, repeat(3, red, blue), gray;

auto

Specifies an auto repeater. An auto repeater will be used to fill in values for gaps that would not otherwise receive values from other parts of the list. At most one ''repeat()'' in a given list of values may be an auto repeater.

Continuing from the previous example, if the author does not know how many columns will be in the final layout, they might instead write:

					column-rule-color: gray, repeat(auto, red, blue), gray;

Which will produce a gray decoration in the first and last column gaps, and alternating red and blue decorations in the in-between column gaps.

The second argument to ''repeat()'' is a comma-separated list of values that would be accepted by the property in which the ''repeat()'' appears.

Assigning gap decoration values to gaps

Gap decorations are [=assigned gap decoration values|assigned=] after [=collapsed gutter|gutter collapsing=] has been applied. A given set of [=collapsed gutters=] consume exactly one [=gap decoration=]; the next [=gap decoration=] is applied to the next gutter (or set of [=collapsed gutters=]). Therefore, [=collapsed gutters=] are treated as a single [=gap=] for decoration purposes.

To assign gap decoration values to a list of |gaps| using a list of |values|:

Replace any integer repeaters in |values| with their expanded-out equivalents.
If the list contains no auto repeater, then:

Beginning from the first item in |values| and the first item in |gaps|, assign each value to the corresponding gap. If there are fewer values than gaps, repeat beginning from the first item in |values|, as many times as needed.
End this algorithm.

|values| contains an auto repeater. Let |leading count| be the number of items in |values| before the auto repeater. Let |trailing count| be the number of items in |values| after the auto repeater.
Partition |gaps| as follows:
1. Let |leading gaps| contain the first |leading count| items in |gaps|.
2. Let |trailing gaps| contain the last |trailing count| items in |gaps|, excluding any items in |leading gaps|.
3. Let |auto gaps| contain any items in |gaps| that are not in either |leading gaps| or |trailing gaps|.
If |leading gaps| is non-empty, assign gap decoration values to |leading gaps| using the first |leading count| items in |values|.
If |trailing gaps| is non-empty, assign gap decoration values to |trailing gaps| using the first |trailing count| items in |values|.
If |auto gaps| is non-empty, assign gap decoration values to |auto gaps| using the list of values in the second argument of the auto repeater.

agnostic/gap-decorations-011-crash.html grid/grid-gap-decorations-058-crash.html grid/grid-gap-decorations-059-crash.html grid/grid-gap-decorations-060-crash.html grid/grid-gap-decorations-061.html grid/grid-gap-decorations-062.html grid/grid-gap-decorations-063.html

Interpolation of list values

When interpolating ''repeat()'' values, or lists of values for 'rule-color' or 'rule-width', the interpolation proceeds in two steps:

Expansion: Expand any [=integer repeater=] into its equivalent list of values.
List Interpolation: Apply the [=repeatable list=] interpolation algorithm to the expanded lists, interpolating each item against its counterpart.

		@keyframes example {
			from { column-rule-width: 10px; }
			to   { column-rule-width: 20px, 40px; }
		}

Interpolation of the above values would result in expansion of the "from" and "to" values to create lists of equal lengths:

		From:   10px, 10px
		At 50%: 15px, 25px
		To:     20px, 40px

		@keyframes example {
			from { column-rule-width: repeat(2, 5px, 10px); }
			to   { column-rule-width: repeat(2, 15px, 20px); }
		}

Interpolation of the above values would result in expansion of the "from" and "to" values to create lists of equal lengths:

		From:    5px, 10px,  5px, 10px
		At 50%: 10px, 15px, 10px, 15px
		To:     15px, 20px, 15px, 20px

		@keyframes example {
			from { column-rule-width: repeat(2, 10px, 20px); }
			to   { column-rule-width: 20px; }
		}

Interpolation of the above values would result in expansion of the "from" and "to" values to create lists of equal lengths:

		From:   10px, 20px, 10px, 20px
		At 50%: 15px, 20px, 15px, 20px
		To:     20px, 20px, 20px, 20px

		@keyframes example {
			from { column-rule-width: repeat(2, 10px, 20px); }
			to   { column-rule-width: 20px, 30px; }
		}

Interpolation of the above values would result in expansion of the "from" and "to" values to create lists of equal lengths:

		From:   10px, 20px, 10px, 20px
		At 50%: 15px, 25px, 15px, 25px
		To:     20px, 30px, 20px, 30px

When either of the lists we are interpolating between (|from| and |to|) include an auto repeater:

Split each of |from| and |to| into segments, similar to how we [=assign gap decoration values=]:
1. Let |leading values| be the values before the auto repeater.
2. Let |trailing values| be the values after the auto repeater.
3. Let |auto values| be the values inside the auto repeater.
If only one of |from| or |to| contains an auto-repeater, we fall back to [=discrete=] interpolation.
Expand any integer repeaters on each segment.
If the length of |leading values| in |from| and |leading values| in |to| don't match, we fall back to [=discrete=] interpolation. If the length of |trailing values| in |from| and |trailing values| in |to| don't match, we fall back to [=discrete=] interpolation.
When both |from| and |to| contain auto-repeaters, and the length of their segments match as described above, apply [=repeatable list=] interpolation to the lists of values in each |auto values|.

			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px, repeat(auto, 40px), 40px }
			}

			From:   10px, repeat(auto, 20px), 30px
			At 50%: 15px, repeat(auto, 30px), 35px
			To:     20px, repeat(auto, 40px), 40px

			@keyframes example {
				from { column-rule-width: 10px, 20px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px), 40px }
			}

			From:   10px, 20px, repeat(auto, 20px, 20px), 30px
			At 50%: 15px, 25px, repeat(auto, 30px, 35px), 35px
			To:     20px, 30px, repeat(auto, 40px, 50px), 40px

			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px) }
				to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px) }
			}

			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px, repeat(auto, 40px), 40px, 50px }
			}

			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px }
			}

Only |from| contains an auto repeater, so we fall back to [=discrete=] interpolation.

animation/column-rule-inset-interpolation.html animation/gap-decorations-color-neutral-keyframe-001.html animation/gap-decorations-color-neutral-keyframe-002.html animation/gap-decorations-color-neutral-keyframe-003.html animation/gap-decorations-color-neutral-keyframe-004.html animation/gap-decorations-color-neutral-keyframe-005.html animation/gap-decorations-inset-neutral-keyframe-001.html animation/gap-decorations-inset-neutral-keyframe-002.html animation/gap-decorations-width-neutral-keyframe-001.html animation/gap-decorations-width-neutral-keyframe-002.html animation/gap-decorations-width-neutral-keyframe-003.html animation/gap-decorations-width-neutral-keyframe-004.html animation/gap-decorations-width-neutral-keyframe-005.html animation/row-rule-color-interpolation.html animation/row-rule-inset-interpolation.html animation/row-rule-width-interpolation.html animation/rule-color-interpolation-conversion-001.html animation/rule-color-interpolation-conversion-002.html animation/rule-color-interpolation-conversion-crash.html animation/rule-color-interpolation-multiple-values-001.html animation/rule-color-interpolation-repeaters-001.html animation/rule-width-interpolation-conversion-001.html animation/rule-width-interpolation-conversion-002.html animation/rule-width-interpolation-multiple-values-001.html animation/rule-width-interpolation-multiple-values-002.html animation/rule-width-interpolation-repeaters.html

Serialization

The 'column-rule', 'row-rule', and 'rule' shorthands are serialized from component longhand properties only if the longhand properties are [=repeater aligned=]. If the longhand properties are not [=repeater aligned=], the shorthand serializes as an empty string.

Let |W|, |S| and |C| be the values for the width, style, and color longhand properties respectively. Recall that each is a list of items, where an item is either a single value or a ''repeat()'' notation. The longhand properties are repeater aligned if and only if all of the following are true:

|W|, |S| and |C| all have the same number of items.
For each item index |i|, |W|[|i|], |S|[|i|] and |C|[|i|] all have the same shape:
1. they are either all non-repeat values, all integer repeaters, or all auto repeaters.
2. If they are integer repeaters, the <> values are equal.
3. Each ''repeat()'' notation contains the same number of values.

This shorthand declaration:

			column-rule: 1px solid red, 2px dashed green, 3px dotted blue;

Breaks down to the following longhand values:

			column-rule-width: 1px, 2px, 3px;
			column-rule-style: solid, dashed, dotted;
			column-rule-color: red, green, blue;

Which serialize back to the same original shorthand value, because the longhands are repeater aligned: all three properties have the same number of items (3), and each item is a single value (not a repeater). The same behavior would occur if the three longhands were specified directly rather than coming from a shorthand.

This shorthand declaration:

			column-rule: 1px solid red, repeat(2, 2px dashed green);

Breaks down to the following longhand values:

			column-rule-width: 1px, repeat(2, 2px);
			column-rule-style: solid, repeat(2, dashed);
			column-rule-color: red, repeat(2, green);

Which serialize back to the same original shorthand value, because the longhands are repeater aligned: all three properties have the same number of items (2), and at each index the items have matching types (single values at index 0, integer repeaters at index 1), the integer repeaters have the same repeat count (2), and the integer repeaters contain the same number of values (1). The same behavior would occur if the three longhands were specified directly rather than coming from a shorthand.

This shorthand declaration:

			column-rule: repeat(auto, 1px solid red, 2px dashed green);

Breaks down to the following longhand values:

			column-rule-width: repeat(auto, 1px, 2px);
			column-rule-style: repeat(auto, solid, dashed);
			column-rule-color: repeat(auto, red, green);

Which serialize back to the same original shorthand value, because the longhands are repeater aligned: all three properties have the same number of items (1), each item is an auto repeater, and the auto repeaters contain the same number of values (2). The same behavior would occur if the three longhands were specified directly rather than coming from a shorthand.

These declarations:

			column-rule: repeat(auto, 1px solid red, 2px dashed green);
			column-rule-width: repeat(auto, 3px, 4px, 5px);

Break down to the following longhand values:

			column-rule-width: repeat(auto, 3px, 4px, 5px);
			column-rule-style: repeat(auto, solid, dashed);
			column-rule-color: repeat(auto, red, green);

The 'column-rule' shorthand will serialize as an empty string because the longhands are not repeater aligned: the auto repeaters contain different numbers of values. The same behavior would occur if the three longhands were specified directly rather than coming from a shorthand.

These declarations:

			column-rule: repeat(2, 1px solid red, 2px dashed green);
			column-rule-style: dashed, dotted, solid;

Break down to the following longhand values:

			column-rule-width: repeat(2, 1px, 2px);
			column-rule-style: dashed, dotted, solid;
			column-rule-color: repeat(2, red, green);

The 'column-rule' shorthand will serialize as an empty string because the longhands are not repeater aligned: the items at index 0 have mismatched types (integer repeater for width and color, single value for style). The same behavior would occur if the three longhands were specified directly rather than coming from a shorthand.

These declarations:

			column-rule: repeat(2, 1px solid red, 2px dashed green);
			column-rule-color: repeat(4, red, cyan);

Break down to the following longhand values:

			column-rule-width: repeat(2, 1px, 2px);
			column-rule-style: repeat(2, solid, dashed);
			column-rule-color: repeat(4, red, cyan);

The 'column-rule' shorthand will serialize as an empty string because the longhands are not repeater aligned: the integer repeaters have different repeat counts. The same behavior would occur if the three longhands were specified directly rather than coming from a shorthand.

agnostic/gap-decorations-007-crash.html agnostic/gap-decorations-008-crash.html multicol/multicol-gap-decorations-021.html parsing/gap-decorations-important.html

Acknowledgements

Many thanks to Sam Davis Omekara Jr. and Javier Contreras Tenorio who contributed a significant amount of normative text, examples, and WPT coverage to this specification.

Mats Palmgren's earlier proposal for Gap Decorations helped inform the direction of this specification.

Additional feedback that helped shape this specification was contributed by many people, including: Ahmad Shadeed, Alison Maher, Benoît Rouleau, Elika Etemad, Ian Kilpatrick, Josh Tumath, Kurt Catti-Schmidt, Lea Verou, Oliver Williams, Rachel Andrew, Sebastian Zartner, Tab Atkins-Bittner, and the CSS Working Group members.

Privacy Considerations

No new privacy considerations have been reported on this specification.

Security Considerations

No new security considerations have been reported on this specification.

Changes

Changes since the 27 February 2026 Working Draft

Added the ''column-rule-visibility-items/normal'' value to [[#visibility|*-rule-visibility-items]] and made it the new initial value. (Issue 13477)
Clarified applicability of writing mode and text decoration to gap decorations. (Issue 13648, Issue 13649)
Updated with links to additional WPTs.

Changes since the 17 April 2025 Working Draft

Specified the behavior when gaps are coincident due to track collapsing. (Issue 11814)
Renamed ''rule-paint-order'' to 'rule-overlap'. (Issue 12540)
Updated the definition for intersections to use [=gutter=]. (Issue 12084)
Updated trailing gap decoration assignment to use values in forward order. (Issue 12527)
Specified the interpolation behavior for values which may contain repeaters. (Issue 12431)
Removed the special case of 'column-rule-width' having a computed value of ''0'' when 'column-rule-style' is ''/none'' or ''/hidden''. (Issue 11494)
Changed the rule-outset properties to [[#inset|rule-inset]] and introduced related properties. (Issue 12603, Issue 12848, Issue 8402)
Updated the initial value of the [[#inset|inset]] properties to ''0'' and removed the auto keyword. (Issue 13137)
Added a paragraph clarifying that gap decorations are not drawn where gaps are suppressed due to fragment breaks. (Issue 11520)
Updated the behavior for when gaps are coincident due to track collapsing. (Issue 11814)
Added a section for serializing shorthands from separate longhands. (Issue 12201)
Updated the color, width, and style longhand properties to use comma-separated lists instead of space-separated lists. (Issue 12201)
Added section for gap decorations next to empty grid areas. (Issue 12602)
Clarified that alignment space contributes to gap size. (Issue 12922)
Renamed the [[#break|break]] value ''spanning-item'' to ''column-rule-break/normal''. (Issue 13127)
Refreshed examples to reflect changes to the specification.
Added links to WPT suite.
Added Acknowledgements section.