From 728d8d2766206f4af18cd0621219db8533dd54c8 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Mon, 22 Jun 2026 17:44:33 +0200
Subject: [PATCH 01/18] new property: row-rule-color

---
 .../properties/row-rule-color/index.md        | 252 ++++++++++++++++++
 1 file changed, 252 insertions(+)
 create mode 100644 files/en-us/web/css/reference/properties/row-rule-color/index.md

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
new file mode 100644
index 000000000000000..446d9a6a047a335
--- /dev/null
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -0,0 +1,252 @@
+---
+title: "`row-rule-color` CSS property"
+short-title: row-rule-color
+slug: Web/CSS/Reference/Properties/row-rule-color
+page-type: css-property
+browser-compat: css.properties.row-rule-color
+sidebar: cssref
+---
+
+The **`row-rule-color`** [CSS](/en-US/docs/Web/CSS) property defines the colors of the lines drawn between rows in multi-row layouts.
+
+{{InteractiveExample("CSS Demo: row-rule-color")}}
+
+```css interactive-example-choice
+row-rule-color: magenta;
+```
+
+```css interactive-example-choice
+row-rule-color: magenta, goldenrod;
+```
+
+```css interactive-example-choice
+row-rule-color: repeat(2, magenta), goldenrod;
+```
+
+```css interactive-example-choice
+row-rule-color: goldenrod, repeat(auto, magenta), goldenrod;
+```
+
+```css interactive-example-choice
+row-rule-color: currentColor;
+```
+
+```html interactive-example
+<section id="default-example">
+  <ul id="example-element">
+    <li>One fish</li>
+    <li>Two fish</li>
+    <li>Red fish</li>
+    <li>Blue fish</li>
+  </ul>
+</section>
+```
+
+```css interactive-example
+#example-element {
+  display: flex;
+  flex-flow: column;
+  row-rule-style: solid;
+  row-rule-width: 5px;
+  gap: 5px;
+  text-align: left;
+}
+```
+
+## Syntax
+
+```css
+/* single value */
+row-rule-color: red;
+row-rule-color: rgb(192 56 78);
+row-rule-color: transparent;
+row-rule-color: hsl(0 100% 50% / 60%);
+row-rule-color: var(--primaryColor);
+
+/* multiple values */
+row-rule-color: red, transparent;
+row-rule-color: repeat(3, red), repeat(3, transparent);
+row-rule-color: red, repeat(auto, transparent), red;
+
+/* Global values */
+row-rule-color: inherit;
+row-rule-color: initial;
+row-rule-color: revert;
+row-rule-color: revert-layer;
+row-rule-color: unset;
+```
+
+### Values
+
+- `<line-color>`
+  - : A {{cssxref("&lt;color&gt;")}} representing the color of the line.
+
+- `<repeat-line-color>`
+  - : A {{cssxref("repeat()")}} function, with the first parameter being an {{cssxref("&lt;integer&gt;")}} of `1` or more, representing the number of the times the second parameter, a {{cssxref("&lt;color&gt;")}} value, should be repeated.
+
+- `<auto-repeat-line-color>`
+  - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and a `<color>` as the second, representing the color to be repeated as many times as needed to fill in values for any row-rules that would not otherwise receive values from other parts of the property value.
+
+## Description
+
+The `row-rule-color` property defines the colors of any row rule lines drawn in the gaps between rows in [multi-column](/en-US/docs/Web/CSS/Guides/Multicol_layout), [flex](/en-US/docs/Web/CSS/Guides/Flexible_box_layout), and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) containers with more than one row.
+
+The value is a comma-separated list of `<line-color>`, `<repeated-line-color>`, and optionally an `<auto-repeat-line-color>`.
+
+### Line colors
+
+A line-color can be declared as any valid CSS {{cssxref("&lt;color&gt;")}} value. If the property value consists of only one `<color>`, all the row rules will be that color. If we declare the following, all row rules will be blue:
+
+```css
+row-rule-color: blue;
+```
+
+When declaring more than one `<line-color>`, separate them with a comma. If there are more row-rules than line-colors, the list of line colors is repeated until every row rule has a color. If we declare the following, every odd rule will be blue and every even rule will be yellow.
+
+```css
+row-rule-color: blue, yellow;
+```
+
+line colors, with declared individual `<line-color>` values, repeated line colors defined with the `repeat()` function specifying a single color and the number of times to repeat it, and at most one `<auto-repeat-line-color>`. The value is a comma separated list of colors, defined either as individual {{cssxref("&lt;color>")}} values, or repeating colors defined using the {{cssxref("repeat()")}} function. The first argument specifies the number of repetitions, as an integer of `1` or greater, or the keyword `auto`. The second argument is the color to be repeated.
+
+```css
+row-rule-color: blue, yellow, yellow, yellow, red;
+row-rule-color: blue, repeat(3, yellow), red;
+```
+
+With all the CSS color features, color spaces, custom properties, etc., using `repeat()` can make the value much easier to read. The repeating nature of the property value enables a recurring pattern to be written in a more compact form providing a repeating pattern, no matter how great the number of rows. If we set `--base: yellow` and `--mixin: blue`, the following will provide similar results to the previous declaration:
+
+```css
+row-rule-color:
+  color-mix(in lch decreasing hue, var(--base) 0%, var(--mixin)),
+  repeat(3, color-mix(in lch decreasing hue, var(--base) 100%, var(--mixin))),
+  color-mix(in lch decreasing hue, var(--base) 58%, var(--mixin));
+```
+
+This creates a list of five colors. If the number of colors in the `row-rule-color` value's color list exceeds the number of gaps between rows, the excess color values are ignored. If the container has three rows, the rule in the first gutter will be blue and the second yellow.
+
+If there are more gutters than colors, as there are no `repeat()` functions that include the keyword `auto`, the list of colors is repeated. If the container has 6, 11, 16 or 21 rows, this sequence of colors will repeated one, two, three or four time, respectively, with the last rule being red. If the container has any other number of rows, up to 25, the last row rule will not be red.
+
+### Auto-repeating line colors
+
+The `repeat()` function also accepts `auto` as the first argument, instead of a positive integer. With `auto` as the first argument, the `<color>` passed as the second will be repeated as many times as needed to fill in values for any row-rules that would not otherwise receive values from other parts of the property value, which may be none.
+
+```css
+row-rule-color: blue, repeat(auto, yellow), red;
+```
+
+In this case, the first row rule will be blue, the last will be red, and all others will be yellow. It doesn't matter if the container has 3, 6, 11, 16 or 21 rows, the first will always be blue, as long as there are at least three rows, the last will always be red. All the other row rules will be yellow, which means if there are only 2 or 3 rows, there will be no yellow row rules.
+
+The `auto` keyword within the `repeat()` function creates an auto repeater that fills in values for row rules that would not otherwise receive values from other parts of the list, preventing the list from being cycled. At most, only one `repeat(auto, <color>)` can be present in a `row-rule-color` value.
+
+## Formal definition
+
+{{cssinfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Basic example
+
+In this example, we define a single color for the lines drawn between flex items
+
+#### HTML
+
+We include an list of dynamic sports duos:
+
+```html live-sample___basic live-sample___repeat live-sample___func live-sample___auto
+<ul>
+  <li>Simone Biles + Jonathan Owens</li>
+  <li>Serena Williams + Venus Williams</li>
+  <li>Aaron Judge + Giancarlo Stanton</li>
+  <li>LeBron James + Dwyane Wade</li>
+  <li>Xavi Hernandez + Andres Iniesta</li>
+  <li>Kerri Walsh + Misty May Treanor</li>
+</ul>
+```
+
+#### CSS
+
+We define the list to be a flex container, creating rows by setting the {{cssxref("flex-direction")}} to `column` using the {{cssxref("flex-flow")}} shorthand. We include a {{cssxref("gap")}} of `5px` to provide enough room between the rows to fit our `3px` dashed rule:
+
+```css live-sample___basic live-sample___repeat live-sample___func live-sample___auto
+ul {c lc lc l
+  display: flex;
+  flex-flow: column;
+  gap: 5px;
+  row-rule-style: dashed;
+  row-rule-width: 3px;
+  row-rule-color: blue;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("Basic")}}
+
+### Repeating values
+
+This example demonstrates how, when there are fewer values in the list of colors than row rules, the values are repeated.
+
+Using the same HTML and CSS as in the previous example, we include three comma-separated colors as the `row-rule-color` value:
+
+```css live-sample___repeat
+ul {
+  row-rule-color: blue, yellow, red;
+}
+```
+
+{{EmbedLiveSample("Repeat")}}
+
+### Repeat() function
+
+This example demonstrates using the `repeat()` function within the `row-rule-color` property value, and how this function can help make complex values not become unwieldy.
+
+We use the same HTML and CSS as in the previous examples. To demonstrate how values can become complicated and the utility of the `repeat()` function, we declare two custom properties, which we use in three {{cssxref("color-mix()")}} color function declarations. The second declaration is within a `repeat()` function, set to repeat 3 times.
+
+```css live-sample___func live-sample___auto
+ul {
+  --base: yellow;
+  --mixin: blue;
+  row-rule-color:
+    color-mix(in lch decreasing hue, var(--base) 0%, var(--mixin)),
+    repeat(3, color-mix(in lch decreasing hue, var(--base) 100%, var(--mixin))),
+    color-mix(in lch decreasing hue, var(--base) 58%, var(--mixin));
+}
+```
+
+{{EmbedLiveSample("func")}}
+
+The middle color is repeated three times. The flex container has six rows, so five gutters. The `repeat()` function repeats our second color three times, creating a color-list with five colors. As there are the same number of row gutters as total colors, the colors are not repeated.
+
+### Using `auto` within `repeat()`
+
+This example demonstrates using `auto`, instead of an integer, within the `repeat()` function.
+
+Using `repeat(auto, <color>)` we set all the row rules to be almost transparent black (`#0001`), except the first and last, which we set to a solid `black`.
+
+```css live-sample___auto
+ul {
+  row-rule-color: black, repeat(auto, #0001), black;
+}
+```
+
+{{EmbedLiveSample("auto")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("row-rule")}} shorthand
+- {{cssxref("column-rule-color")}}
+- {{cssxref("rule")}} shorthand
+- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module

From 7e15869d92681d2332319a83376897bdbc6a45b0 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Mon, 22 Jun 2026 17:52:22 +0200
Subject: [PATCH 02/18] @supports

---
 .../reference/properties/row-rule-color/index.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 446d9a6a047a335..75032d35fdf360a 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -173,7 +173,7 @@ We include an list of dynamic sports duos:
 We define the list to be a flex container, creating rows by setting the {{cssxref("flex-direction")}} to `column` using the {{cssxref("flex-flow")}} shorthand. We include a {{cssxref("gap")}} of `5px` to provide enough room between the rows to fit our `3px` dashed rule:
 
 ```css live-sample___basic live-sample___repeat live-sample___func live-sample___auto
-ul {c lc lc l
+ul {
   display: flex;
   flex-flow: column;
   gap: 5px;
@@ -183,6 +183,20 @@ ul {c lc lc l
 }
 ```
 
+```css hidden live-sample___basic live-sample___repeat live-sample___func live-sample___auto
+@layer no-support {
+  @supports not (row-rule-color: red, blue) {
+    body::before {
+      content: "Your browser doesn't support the row-rule-color property";
+      background-color: wheat;
+      display: block;
+      text-align: center;
+      padding: 1rem 0;
+    }
+  }
+}
+```
+
 #### Result
 
 {{EmbedLiveSample("Basic")}}

From 44260a4e9545c7d28d5011f53bbfc8d84d05e01b Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Mon, 22 Jun 2026 18:26:57 +0200
Subject: [PATCH 03/18] @supports

---
 .../properties/row-rule-color/index.md        | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 75032d35fdf360a..26346aa79c6119a 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -183,20 +183,6 @@ ul {
 }
 ```
 
-```css hidden live-sample___basic live-sample___repeat live-sample___func live-sample___auto
-@layer no-support {
-  @supports not (row-rule-color: red, blue) {
-    body::before {
-      content: "Your browser doesn't support the row-rule-color property";
-      background-color: wheat;
-      display: block;
-      text-align: center;
-      padding: 1rem 0;
-    }
-  }
-}
-```
-
 #### Result
 
 {{EmbedLiveSample("Basic")}}
@@ -250,6 +236,20 @@ ul {
 
 {{EmbedLiveSample("auto")}}
 
+```css hidden live-sample___basic live-sample___repeat live-sample___func live-sample___auto
+@layer no-support {
+  @supports not (row-rule-color: red, blue) {
+    body::before {
+      content: "Your browser doesn't support the row-rule-color property";
+      background-color: wheat;
+      display: block;
+      text-align: center;
+      padding: 1rem 0;
+    }
+  }
+}
+```
+
 ## Specifications
 
 {{Specifications}}

From 523bd33aa926c851dd5c35e88f5c543ffc7d3720 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Mon, 22 Jun 2026 21:16:42 +0200
Subject: [PATCH 04/18] my cat ate my homework... or my text

---
 .../css/reference/properties/row-rule-color/index.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 26346aa79c6119a..76916ad2c42a4ca 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -107,7 +107,9 @@ When declaring more than one `<line-color>`, separate them with a comma. If ther
 row-rule-color: blue, yellow;
 ```
 
-line colors, with declared individual `<line-color>` values, repeated line colors defined with the `repeat()` function specifying a single color and the number of times to repeat it, and at most one `<auto-repeat-line-color>`. The value is a comma separated list of colors, defined either as individual {{cssxref("&lt;color>")}} values, or repeating colors defined using the {{cssxref("repeat()")}} function. The first argument specifies the number of repetitions, as an integer of `1` or greater, or the keyword `auto`. The second argument is the color to be repeated.
+### Repeated line colors
+
+The `repeat()` function, with an integer of `1` or greater as the first argument, can be used to repeat the valid CSS {{cssxref("&lt;color&gt;")}} passed as the second argument the specified number of times. This allows the same color to be repeated a set number of times without repeating the color, multiple times. The following declarations are equivalent:
 
 ```css
 row-rule-color: blue, yellow, yellow, yellow, red;
@@ -185,7 +187,7 @@ ul {
 
 #### Result
 
-{{EmbedLiveSample("Basic")}}
+{{EmbedLiveSample("Basic", "", "180")}}
 
 ### Repeating values
 
@@ -199,7 +201,7 @@ ul {
 }
 ```
 
-{{EmbedLiveSample("Repeat")}}
+{{EmbedLiveSample("Repeat", "", "180")}}
 
 ### Repeat() function
 
@@ -218,7 +220,7 @@ ul {
 }
 ```
 
-{{EmbedLiveSample("func")}}
+{{EmbedLiveSample("func", "", "180")}}
 
 The middle color is repeated three times. The flex container has six rows, so five gutters. The `repeat()` function repeats our second color three times, creating a color-list with five colors. As there are the same number of row gutters as total colors, the colors are not repeated.
 
@@ -234,7 +236,7 @@ ul {
 }
 ```
 
-{{EmbedLiveSample("auto")}}
+{{EmbedLiveSample("auto", "", "180")}}
 
 ```css hidden live-sample___basic live-sample___repeat live-sample___func live-sample___auto
 @layer no-support {

From 75bcf9e89ab84b804b7d8e4246a424b7fd47eeab Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Mon, 22 Jun 2026 22:00:11 +0200
Subject: [PATCH 05/18] shorthand membership

---
 .../en-us/web/css/reference/properties/row-rule-color/index.md  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 76916ad2c42a4ca..40a7b9d4e09fd91 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -93,6 +93,8 @@ The `row-rule-color` property defines the colors of any row rule lines drawn in
 
 The value is a comma-separated list of `<line-color>`, `<repeated-line-color>`, and optionally an `<auto-repeat-line-color>`.
 
+The `row-rule-color`, along with the {{cssxref("row-rule-width")}} and {{cssxref("row-rule-style")}} properties, can be set using the {{cssxref("row-rule")}} shorthand. The `row-rule-color`, along with the {{cssxref("column-rule-color")}} property, can also be set using the {{cssxref("rule-color")}} shorthand.
+
 ### Line colors
 
 A line-color can be declared as any valid CSS {{cssxref("&lt;color&gt;")}} value. If the property value consists of only one `<color>`, all the row rules will be that color. If we declare the following, all row rules will be blue:

From e7f0e27d1bb2269c12d7b67db1285bc190ff379a Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Wed, 1 Jul 2026 15:28:38 +0200
Subject: [PATCH 06/18] typo

---
 .../web/css/reference/properties/row-rule-color/index.md    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 40a7b9d4e09fd91..6eb6f2e8dd41729 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -129,7 +129,7 @@ row-rule-color:
 
 This creates a list of five colors. If the number of colors in the `row-rule-color` value's color list exceeds the number of gaps between rows, the excess color values are ignored. If the container has three rows, the rule in the first gutter will be blue and the second yellow.
 
-If there are more gutters than colors, as there are no `repeat()` functions that include the keyword `auto`, the list of colors is repeated. If the container has 6, 11, 16 or 21 rows, this sequence of colors will repeated one, two, three or four time, respectively, with the last rule being red. If the container has any other number of rows, up to 25, the last row rule will not be red.
+If there are more gutters than colors, as there are no `repeat()` functions that include the keyword `auto`, the list of colors is repeated. If the container has 6, 11, 16 or 21 rows, this sequence of colors will be repeated one, two, three or four times, respectively, with the last rule being red. If the container has any other number of rows, up to 25, the last row rule will not be red.
 
 ### Auto-repeating line colors
 
@@ -155,11 +155,11 @@ The `auto` keyword within the `repeat()` function creates an auto repeater that
 
 ### Basic example
 
-In this example, we define a single color for the lines drawn between flex items
+In this example, we define a single color for the lines drawn between flex items.
 
 #### HTML
 
-We include an list of dynamic sports duos:
+We include a list of dynamic sports duos:
 
 ```html live-sample___basic live-sample___repeat live-sample___func live-sample___auto
 <ul>

From 4fd05fa19592d4e02634cd190fc81030c038ffb6 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Mon, 6 Jul 2026 13:52:16 +0200
Subject: [PATCH 07/18] Apply suggestions from code review

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 .../reference/properties/row-rule-color/index.md   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 6eb6f2e8dd41729..ecd2f744388b659 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.row-rule-color
 sidebar: cssref
 ---
 
-The **`row-rule-color`** [CSS](/en-US/docs/Web/CSS) property defines the colors of the lines drawn between rows in multi-row layouts.
+The **`row-rule-color`** [CSS](/en-US/docs/Web/CSS) property defines the colors of the lines drawn between rows in multi-row grid, flex, and multi-col layouts.
 
 {{InteractiveExample("CSS Demo: row-rule-color")}}
 
@@ -56,14 +56,14 @@ row-rule-color: currentColor;
 ## Syntax
 
 ```css
-/* single value */
+/* Single value */
 row-rule-color: red;
 row-rule-color: rgb(192 56 78);
 row-rule-color: transparent;
 row-rule-color: hsl(0 100% 50% / 60%);
 row-rule-color: var(--primaryColor);
 
-/* multiple values */
+/* Multiple values */
 row-rule-color: red, transparent;
 row-rule-color: repeat(3, red), repeat(3, transparent);
 row-rule-color: red, repeat(auto, transparent), red;
@@ -91,7 +91,7 @@ row-rule-color: unset;
 
 The `row-rule-color` property defines the colors of any row rule lines drawn in the gaps between rows in [multi-column](/en-US/docs/Web/CSS/Guides/Multicol_layout), [flex](/en-US/docs/Web/CSS/Guides/Flexible_box_layout), and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) containers with more than one row.
 
-The value is a comma-separated list of `<line-color>`, `<repeated-line-color>`, and optionally an `<auto-repeat-line-color>`.
+The value is a comma-separated list of components, each of which can be a `<line-color>`, `<repeated-line-color>`, or `<auto-repeat-line-color>`.
 
 The `row-rule-color`, along with the {{cssxref("row-rule-width")}} and {{cssxref("row-rule-style")}} properties, can be set using the {{cssxref("row-rule")}} shorthand. The `row-rule-color`, along with the {{cssxref("column-rule-color")}} property, can also be set using the {{cssxref("rule-color")}} shorthand.
 
@@ -103,7 +103,7 @@ A line-color can be declared as any valid CSS {{cssxref("&lt;color&gt;")}} value
 row-rule-color: blue;
 ```
 
-When declaring more than one `<line-color>`, separate them with a comma. If there are more row-rules than line-colors, the list of line colors is repeated until every row rule has a color. If we declare the following, every odd rule will be blue and every even rule will be yellow.
+When more than one `<line-color>` is declared, they will be applied to row-rules in the order specified. If there are more row-rules than `<line-color> values, the list of line colors is repeated until every row rule has a color. If we declare the following, for example, every odd rule will be blue, and every even rule will be yellow.
 
 ```css
 row-rule-color: blue, yellow;
@@ -111,14 +111,14 @@ row-rule-color: blue, yellow;
 
 ### Repeated line colors
 
-The `repeat()` function, with an integer of `1` or greater as the first argument, can be used to repeat the valid CSS {{cssxref("&lt;color&gt;")}} passed as the second argument the specified number of times. This allows the same color to be repeated a set number of times without repeating the color, multiple times. The following declarations are equivalent:
+The `repeat()` function, with an integer of `1` or greater as the first argument, can be used to repeat a valid CSS {{cssxref("&lt;color&gt;")}} passed as the second argument the specified number of times. This allows the same color to be repeated a set number of times without repeating the same `<line-color>` multiple times. The following declarations are equivalent:
 
 ```css
 row-rule-color: blue, yellow, yellow, yellow, red;
 row-rule-color: blue, repeat(3, yellow), red;
 ```
 
-With all the CSS color features, color spaces, custom properties, etc., using `repeat()` can make the value much easier to read. The repeating nature of the property value enables a recurring pattern to be written in a more compact form providing a repeating pattern, no matter how great the number of rows. If we set `--base: yellow` and `--mixin: blue`, the following will provide similar results to the previous declaration:
+With all the CSS color features, color spaces, custom properties, etc., using `repeat()` can make values much easier to read. It enables a recurring pattern to be written in a more compact form, no matter how large the number of rows. If we set `--base: yellow` and `--mixin: blue`, the following will provide similar results to the previous declaration:
 
 ```css
 row-rule-color:

From f23f4df9fc607a91fcca9c482fbca094af92020a Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Mon, 6 Jul 2026 14:46:54 +0200
Subject: [PATCH 08/18] edits per review

---
 .../properties/row-rule-color/index.md        | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index ecd2f744388b659..b04a6f78c70caef 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -78,6 +78,8 @@ row-rule-color: unset;
 
 ### Values
 
+The `row-rule-color` property accepts a comma-separated list of values, including:
+
 - `<line-color>`
   - : A {{cssxref("&lt;color&gt;")}} representing the color of the line.
 
@@ -85,7 +87,7 @@ row-rule-color: unset;
   - : A {{cssxref("repeat()")}} function, with the first parameter being an {{cssxref("&lt;integer&gt;")}} of `1` or more, representing the number of the times the second parameter, a {{cssxref("&lt;color&gt;")}} value, should be repeated.
 
 - `<auto-repeat-line-color>`
-  - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and a `<color>` as the second, representing the color to be repeated as many times as needed to fill in values for any row-rules that would not otherwise receive values from other parts of the property value.
+  - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and a `<color>` as the second, representing one or more comma-separated `<color>` values to be repeated as many times as needed to fill in values for any row-rules that are not explicitly specified by other components of the property value.
 
 ## Description
 
@@ -103,7 +105,7 @@ A line-color can be declared as any valid CSS {{cssxref("&lt;color&gt;")}} value
 row-rule-color: blue;
 ```
 
-When more than one `<line-color>` is declared, they will be applied to row-rules in the order specified. If there are more row-rules than `<line-color> values, the list of line colors is repeated until every row rule has a color. If we declare the following, for example, every odd rule will be blue, and every even rule will be yellow.
+When more than one `<line-color>` is declared, they will be applied to row-rules in the order specified. If there are more row-rules than `<line-color>` values, the list of line colors is repeated until every row rule has a color. If we declare the following, for example, every odd rule will be blue, and every even rule will be yellow.
 
 ```css
 row-rule-color: blue, yellow;
@@ -118,7 +120,7 @@ row-rule-color: blue, yellow, yellow, yellow, red;
 row-rule-color: blue, repeat(3, yellow), red;
 ```
 
-With all the CSS color features, color spaces, custom properties, etc., using `repeat()` can make values much easier to read. It enables a recurring pattern to be written in a more compact form, no matter how large the number of rows. If we set `--base: yellow` and `--mixin: blue`, the following will provide similar results to the previous declaration:
+Because you can use any valid color value, with all the CSS color features, color spaces, custom properties, etc., using `repeat()` can make values easier to write. It enables a recurring pattern, to be written in a more compact form, no matter how large the number of rows. If we set `--base: yellow` and `--mixin: blue`, the following will provide similar results to the previous declaration:
 
 ```css
 row-rule-color:
@@ -133,13 +135,13 @@ If there are more gutters than colors, as there are no `repeat()` functions that
 
 ### Auto-repeating line colors
 
-The `repeat()` function also accepts `auto` as the first argument, instead of a positive integer. With `auto` as the first argument, the `<color>` passed as the second will be repeated as many times as needed to fill in values for any row-rules that would not otherwise receive values from other parts of the property value, which may be none.
+The `repeat()` function also accepts `auto` as the first argument instead of a positive integer. With `auto` as the first argument, the `<color>` passed as the second will be repeated as many times as needed to fill in values for any row-rules that are not explicitly specified by other components of the property value, if any.
 
 ```css
 row-rule-color: blue, repeat(auto, yellow), red;
 ```
 
-In this case, the first row rule will be blue, the last will be red, and all others will be yellow. It doesn't matter if the container has 3, 6, 11, 16 or 21 rows, the first will always be blue, as long as there are at least three rows, the last will always be red. All the other row rules will be yellow, which means if there are only 2 or 3 rows, there will be no yellow row rules.
+In this case, the first row rule will be blue, the last will be red, and all others will be yellow. It doesn't matter if the container has 3, 6, 11, 16 or 21 rows, the first will always be blue and, as long as there are at least two row-rules, the last will always be red. All the other row rules will be yellow, which means if there are only 2 or 3 rows, there will be no yellow row rules.
 
 The `auto` keyword within the `repeat()` function creates an auto repeater that fills in values for row rules that would not otherwise receive values from other parts of the list, preventing the list from being cycled. At most, only one `repeat(auto, <color>)` can be present in a `row-rule-color` value.
 
@@ -205,11 +207,11 @@ ul {
 
 {{EmbedLiveSample("Repeat", "", "180")}}
 
-### Repeat() function
+### Using the `repeat()` function
 
 This example demonstrates using the `repeat()` function within the `row-rule-color` property value, and how this function can help make complex values not become unwieldy.
 
-We use the same HTML and CSS as in the previous examples. To demonstrate how values can become complicated and the utility of the `repeat()` function, we declare two custom properties, which we use in three {{cssxref("color-mix()")}} color function declarations. The second declaration is within a `repeat()` function, set to repeat 3 times.
+We use the same HTML and CSS as in the previous examples. To demonstrate how values can become complicated and the utility of the `repeat()` function, we declare two custom properties, which we use in three {{cssxref("color-mix()")}} color function declarations (to create the same blue, red, and yellow colors as in the previous example). The second declaration is within a `repeat()` function, set to repeat 3 times.
 
 ```css live-sample___func live-sample___auto
 ul {
@@ -234,7 +236,7 @@ Using `repeat(auto, <color>)` we set all the row rules to be almost transparent
 
 ```css live-sample___auto
 ul {
-  row-rule-color: black, repeat(auto, #0001), black;
+  row-rule-color: black, repeat(auto, #0002), black;
 }
 ```
 
@@ -264,7 +266,10 @@ ul {
 
 ## See also
 
-- {{cssxref("row-rule")}} shorthand
+- {{cssxref("row-rule-width")}}
+- {{cssxref("row-rule-style")}}
 - {{cssxref("column-rule-color")}}
+- {{cssxref("row-rule")}} shorthand
+- {{cssxref("rule-color")}} shorthand
 - {{cssxref("rule")}} shorthand
 - [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module

From f89a8cd39d4cb36b2660cb64c95401cf0355e225 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Mon, 13 Jul 2026 18:56:46 +0200
Subject: [PATCH 09/18] Update
 files/en-us/web/css/reference/properties/row-rule-color/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 .../en-us/web/css/reference/properties/row-rule-color/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index b04a6f78c70caef..8e9e9b2ba20ab93 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -93,7 +93,7 @@ The `row-rule-color` property accepts a comma-separated list of values, includin
 
 The `row-rule-color` property defines the colors of any row rule lines drawn in the gaps between rows in [multi-column](/en-US/docs/Web/CSS/Guides/Multicol_layout), [flex](/en-US/docs/Web/CSS/Guides/Flexible_box_layout), and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) containers with more than one row.
 
-The value is a comma-separated list of components, each of which can be a `<line-color>`, `<repeated-line-color>`, or `<auto-repeat-line-color>`.
+The value is a comma-separated list of components, which can include `<line-color>`, `<repeated-line-color>`, and `<auto-repeat-line-color>` types.
 
 The `row-rule-color`, along with the {{cssxref("row-rule-width")}} and {{cssxref("row-rule-style")}} properties, can be set using the {{cssxref("row-rule")}} shorthand. The `row-rule-color`, along with the {{cssxref("column-rule-color")}} property, can also be set using the {{cssxref("rule-color")}} shorthand.
 

From 43c0faf87d15b8e9fe9c76d3b8f66d2510962cd7 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Mon, 13 Jul 2026 18:57:20 +0200
Subject: [PATCH 10/18] Update
 files/en-us/web/css/reference/properties/row-rule-color/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 .../en-us/web/css/reference/properties/row-rule-color/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 8e9e9b2ba20ab93..47bddd58cf9cf4d 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -87,7 +87,7 @@ The `row-rule-color` property accepts a comma-separated list of values, includin
   - : A {{cssxref("repeat()")}} function, with the first parameter being an {{cssxref("&lt;integer&gt;")}} of `1` or more, representing the number of the times the second parameter, a {{cssxref("&lt;color&gt;")}} value, should be repeated.
 
 - `<auto-repeat-line-color>`
-  - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and a `<color>` as the second, representing one or more comma-separated `<color>` values to be repeated as many times as needed to fill in values for any row-rules that are not explicitly specified by other components of the property value.
+  - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and one or more `<color>` values as subsequent arguments. The provided `<color>` values are repeated as many times as needed to fill in values for any row-rules that are not explicitly specified by other components of the property value.
 
 ## Description
 

From dcc8ce55f8b376ded25b9c2f0bc64ffa4cecc118 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Mon, 13 Jul 2026 18:59:05 +0200
Subject: [PATCH 11/18] Update
 files/en-us/web/css/reference/properties/row-rule-color/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 .../web/css/reference/properties/row-rule-color/index.md      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 47bddd58cf9cf4d..f3ce6809303d49a 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -120,7 +120,9 @@ row-rule-color: blue, yellow, yellow, yellow, red;
 row-rule-color: blue, repeat(3, yellow), red;
 ```
 
-Because you can use any valid color value, with all the CSS color features, color spaces, custom properties, etc., using `repeat()` can make values easier to write. It enables a recurring pattern, to be written in a more compact form, no matter how large the number of rows. If we set `--base: yellow` and `--mixin: blue`, the following will provide similar results to the previous declaration:
+You can use any valid color value from any color space, including CSS color functions, custom properties, etc. Using `repeat()` can make values easier to write, especially as your color values become more complex. It enables a recurring pattern to be written using a single function, regardless of the number of rows.
+
+If we set `--base: yellow` and `--mixin: blue`, the following will provide similar results to the previous declaration:
 
 ```css
 row-rule-color:

From 8a3bfd54f8b3768081e4fd324b952111cd66ccbd Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Mon, 13 Jul 2026 18:59:48 +0200
Subject: [PATCH 12/18] Update
 files/en-us/web/css/reference/properties/row-rule-color/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 .../en-us/web/css/reference/properties/row-rule-color/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index f3ce6809303d49a..e43892bdbc196c4 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -213,7 +213,7 @@ ul {
 
 This example demonstrates using the `repeat()` function within the `row-rule-color` property value, and how this function can help make complex values not become unwieldy.
 
-We use the same HTML and CSS as in the previous examples. To demonstrate how values can become complicated and the utility of the `repeat()` function, we declare two custom properties, which we use in three {{cssxref("color-mix()")}} color function declarations (to create the same blue, red, and yellow colors as in the previous example). The second declaration is within a `repeat()` function, set to repeat 3 times.
+We use the same HTML and CSS as in the previous examples. To demonstrate how values can become complicated and the utility of the `repeat()` function, we declare two custom properties, which we use in three {{cssxref("color-mix()")}} color function declarations to create the same blue, red, and yellow colors as in the previous example. The second declaration is within a `repeat()` function, set to repeat 3 times.
 
 ```css live-sample___func live-sample___auto
 ul {

From 800fa737d9d0c35bfe1d44c2accd19d42e0def6e Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Mon, 13 Jul 2026 19:00:02 +0200
Subject: [PATCH 13/18] Update
 files/en-us/web/css/reference/properties/row-rule-color/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 .../en-us/web/css/reference/properties/row-rule-color/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index e43892bdbc196c4..2704fbf89b659c6 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -238,7 +238,7 @@ Using `repeat(auto, <color>)` we set all the row rules to be almost transparent
 
 ```css live-sample___auto
 ul {
-  row-rule-color: black, repeat(auto, #0002), black;
+  row-rule-color: black, repeat(auto, #0003), black;
 }
 ```
 

From 6684a48a9448934779145218778952a0c146c893 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Mon, 13 Jul 2026 19:08:35 +0200
Subject: [PATCH 14/18] auto can have a color list

---
 .../properties/row-rule-color/index.md        | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 2704fbf89b659c6..78732a877070d1d 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -84,7 +84,7 @@ The `row-rule-color` property accepts a comma-separated list of values, includin
   - : A {{cssxref("&lt;color&gt;")}} representing the color of the line.
 
 - `<repeat-line-color>`
-  - : A {{cssxref("repeat()")}} function, with the first parameter being an {{cssxref("&lt;integer&gt;")}} of `1` or more, representing the number of the times the second parameter, a {{cssxref("&lt;color&gt;")}} value, should be repeated.
+  - : A {{cssxref("repeat()")}} function, with the first parameter being an {{cssxref("&lt;integer&gt;")}} of `1` or more, representing the number of the times the second parameter, a comma-separated list of {{cssxref("&lt;color&gt;")}} values, should be repeated.
 
 - `<auto-repeat-line-color>`
   - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and one or more `<color>` values as subsequent arguments. The provided `<color>` values are repeated as many times as needed to fill in values for any row-rules that are not explicitly specified by other components of the property value.
@@ -97,9 +97,7 @@ The value is a comma-separated list of components, which can include `<line-colo
 
 The `row-rule-color`, along with the {{cssxref("row-rule-width")}} and {{cssxref("row-rule-style")}} properties, can be set using the {{cssxref("row-rule")}} shorthand. The `row-rule-color`, along with the {{cssxref("column-rule-color")}} property, can also be set using the {{cssxref("rule-color")}} shorthand.
 
-### Line colors
-
-A line-color can be declared as any valid CSS {{cssxref("&lt;color&gt;")}} value. If the property value consists of only one `<color>`, all the row rules will be that color. If we declare the following, all row rules will be blue:
+A `<line-color>` can be declared as any valid CSS {{cssxref("&lt;color&gt;")}} value. If the property value consists of only one `<color>`, all the row rules will be that color. If we declare the following, all row rules will be blue:
 
 ```css
 row-rule-color: blue;
@@ -113,11 +111,11 @@ row-rule-color: blue, yellow;
 
 ### Repeated line colors
 
-The `repeat()` function, with an integer of `1` or greater as the first argument, can be used to repeat a valid CSS {{cssxref("&lt;color&gt;")}} passed as the second argument the specified number of times. This allows the same color to be repeated a set number of times without repeating the same `<line-color>` multiple times. The following declarations are equivalent:
+The `repeat()` function, with an integer of `1` or greater as the first argument, can be used to repeat a valid list of CSS {{cssxref("&lt;color&gt;")}} values passed as the second argument the specified number of times. This allows the same color to be repeated a set number of times without repeating the same `<line-color>` multiple times. The following declarations are equivalent:
 
 ```css
-row-rule-color: blue, yellow, yellow, yellow, red;
-row-rule-color: blue, repeat(3, yellow), red;
+row-rule-color: blue, yellow, red, yellow, red;
+row-rule-color: blue, repeat(2, yellow, red);
 ```
 
 You can use any valid color value from any color space, including CSS color functions, custom properties, etc. Using `repeat()` can make values easier to write, especially as your color values become more complex. It enables a recurring pattern to be written using a single function, regardless of the number of rows.
@@ -127,17 +125,20 @@ If we set `--base: yellow` and `--mixin: blue`, the following will provide simil
 ```css
 row-rule-color:
   color-mix(in lch decreasing hue, var(--base) 0%, var(--mixin)),
-  repeat(3, color-mix(in lch decreasing hue, var(--base) 100%, var(--mixin))),
-  color-mix(in lch decreasing hue, var(--base) 58%, var(--mixin));
+  repeat(
+    2,
+    color-mix(in lch decreasing hue, var(--base) 100%, var(--mixin)),
+    color-mix(in lch decreasing hue, var(--base) 58%, var(--mixin))
+  );
 ```
 
 This creates a list of five colors. If the number of colors in the `row-rule-color` value's color list exceeds the number of gaps between rows, the excess color values are ignored. If the container has three rows, the rule in the first gutter will be blue and the second yellow.
 
-If there are more gutters than colors, as there are no `repeat()` functions that include the keyword `auto`, the list of colors is repeated. If the container has 6, 11, 16 or 21 rows, this sequence of colors will be repeated one, two, three or four times, respectively, with the last rule being red. If the container has any other number of rows, up to 25, the last row rule will not be red.
+If there are more gutters than colors, as there are no `repeat()` functions that include the keyword `auto`, the list of colors is repeated. If the container has 6, 11, 16 or 21 rows, this sequence of colors will be repeated one, two, three or four times, respectively, with the last rule being red.
 
 ### Auto-repeating line colors
 
-The `repeat()` function also accepts `auto` as the first argument instead of a positive integer. With `auto` as the first argument, the `<color>` passed as the second will be repeated as many times as needed to fill in values for any row-rules that are not explicitly specified by other components of the property value, if any.
+The `repeat()` function also accepts `auto` as the first argument instead of a positive integer. With `auto` as the first argument, the `<color>` values passed as the second will be repeated as many times as needed to fill in values for any row-rules that are not explicitly specified by other components of the property value, if any.
 
 ```css
 row-rule-color: blue, repeat(auto, yellow), red;

From c7f4d6780fd92528eb69914b43b6ffcd2e073ab4 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Mon, 13 Jul 2026 19:16:45 +0200
Subject: [PATCH 15/18] add multiple values for auto in sytax examples

---
 .../en-us/web/css/reference/properties/row-rule-color/index.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 78732a877070d1d..6790f1b22c2e2b9 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -66,7 +66,10 @@ row-rule-color: var(--primaryColor);
 /* Multiple values */
 row-rule-color: red, transparent;
 row-rule-color: repeat(3, red), repeat(3, transparent);
+row-rule-color: repeat(3, red), repeat(3, yellowm, blue);
 row-rule-color: red, repeat(auto, transparent), red;
+row-rule-color: red, repeat(auto, blue, yellow), red;
+row-rule-color: repeat(3, red), repeat(auto, transparent), repeat(3, red);
 
 /* Global values */
 row-rule-color: inherit;

From ad810ee2e598e56204129246881a3b98d4c83105 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Mon, 13 Jul 2026 19:39:50 +0200
Subject: [PATCH 16/18] grammar nits

---
 .../reference/properties/row-rule-color/index.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 6790f1b22c2e2b9..585763c2b67833b 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -87,7 +87,7 @@ The `row-rule-color` property accepts a comma-separated list of values, includin
   - : A {{cssxref("&lt;color&gt;")}} representing the color of the line.
 
 - `<repeat-line-color>`
-  - : A {{cssxref("repeat()")}} function, with the first parameter being an {{cssxref("&lt;integer&gt;")}} of `1` or more, representing the number of the times the second parameter, a comma-separated list of {{cssxref("&lt;color&gt;")}} values, should be repeated.
+  - : A {{cssxref("repeat()")}} function, with the first parameter being an {{cssxref("&lt;integer&gt;")}} of `1` or more, representing the number of times the second parameter, a comma-separated list of {{cssxref("&lt;color&gt;")}} values, should be repeated.
 
 - `<auto-repeat-line-color>`
   - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and one or more `<color>` values as subsequent arguments. The provided `<color>` values are repeated as many times as needed to fill in values for any row-rules that are not explicitly specified by other components of the property value.
@@ -137,7 +137,7 @@ row-rule-color:
 
 This creates a list of five colors. If the number of colors in the `row-rule-color` value's color list exceeds the number of gaps between rows, the excess color values are ignored. If the container has three rows, the rule in the first gutter will be blue and the second yellow.
 
-If there are more gutters than colors, as there are no `repeat()` functions that include the keyword `auto`, the list of colors is repeated. If the container has 6, 11, 16 or 21 rows, this sequence of colors will be repeated one, two, three or four times, respectively, with the last rule being red.
+If there are more gutters than colors, as there are no `repeat()` functions that include the keyword `auto`, the list of colors is repeated. If the container has 6, 11, 16, or 21 rows, this sequence of colors will be repeated one, two, three, or four times, respectively, with the last rule being red.
 
 ### Auto-repeating line colors
 
@@ -147,9 +147,9 @@ The `repeat()` function also accepts `auto` as the first argument instead of a p
 row-rule-color: blue, repeat(auto, yellow), red;
 ```
 
-In this case, the first row rule will be blue, the last will be red, and all others will be yellow. It doesn't matter if the container has 3, 6, 11, 16 or 21 rows, the first will always be blue and, as long as there are at least two row-rules, the last will always be red. All the other row rules will be yellow, which means if there are only 2 or 3 rows, there will be no yellow row rules.
+In this case, the first row rule will be blue, the last will be red, and all others will be yellow. It doesn't matter if the container has 3, 6, 11, 16, or 21 rows; the first will always be blue and, as long as there are at least two row-rules, the last will always be red. All the other row rules will be yellow, which means if there are only 2 or 3 rows, there will be no yellow row rules.
 
-The `auto` keyword within the `repeat()` function creates an auto repeater that fills in values for row rules that would not otherwise receive values from other parts of the list, preventing the list from being cycled. At most, only one `repeat(auto, <color>)` can be present in a `row-rule-color` value.
+The `auto` keyword within the `repeat()` function creates an auto-repeater that fills in values for row rules that would not otherwise receive values from other parts of the list, preventing the list from being cycled. At most, only one `repeat(auto, <color>)` can be present in a `row-rule-color` value.
 
 ## Formal definition
 
@@ -182,7 +182,7 @@ We include a list of dynamic sports duos:
 
 #### CSS
 
-We define the list to be a flex container, creating rows by setting the {{cssxref("flex-direction")}} to `column` using the {{cssxref("flex-flow")}} shorthand. We include a {{cssxref("gap")}} of `5px` to provide enough room between the rows to fit our `3px` dashed rule:
+We define the list as a flex container, creating rows by setting {{cssxref("flex-direction")}} to `column` with the {{cssxref("flex-flow")}} shorthand. We include a {{cssxref("gap")}} of `5px` to provide enough room between the rows to fit our `3px` dashed rule:
 
 ```css live-sample___basic live-sample___repeat live-sample___func live-sample___auto
 ul {
@@ -215,7 +215,7 @@ ul {
 
 ### Using the `repeat()` function
 
-This example demonstrates using the `repeat()` function within the `row-rule-color` property value, and how this function can help make complex values not become unwieldy.
+This example demonstrates using the `repeat()` function within the `row-rule-color` property value and how this function can help prevent complex values from becoming unwieldy.
 
 We use the same HTML and CSS as in the previous examples. To demonstrate how values can become complicated and the utility of the `repeat()` function, we declare two custom properties, which we use in three {{cssxref("color-mix()")}} color function declarations to create the same blue, red, and yellow colors as in the previous example. The second declaration is within a `repeat()` function, set to repeat 3 times.
 
@@ -232,13 +232,13 @@ ul {
 
 {{EmbedLiveSample("func", "", "180")}}
 
-The middle color is repeated three times. The flex container has six rows, so five gutters. The `repeat()` function repeats our second color three times, creating a color-list with five colors. As there are the same number of row gutters as total colors, the colors are not repeated.
+The middle color is repeated three times. The flex container has six rows, so five gutters. The `repeat()` function repeats our second color three times, creating a color list with five colors. Since there are as many row gutters as there are total colors, the colors are not repeated.
 
 ### Using `auto` within `repeat()`
 
 This example demonstrates using `auto`, instead of an integer, within the `repeat()` function.
 
-Using `repeat(auto, <color>)` we set all the row rules to be almost transparent black (`#0001`), except the first and last, which we set to a solid `black`.
+Using `repeat(auto, <color>)` we set all the row rules to be almost transparent black (`#0003`), except the first and last, which we set to a solid `black`.
 
 ```css live-sample___auto
 ul {

From 5befd8fe413611077f6a788dc67e63ebf449a87d Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Wed, 15 Jul 2026 12:47:22 +0200
Subject: [PATCH 17/18] Apply suggestions from code review

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 .../reference/properties/row-rule-color/index.md   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index 585763c2b67833b..f39f0d1b6c3f71f 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -66,7 +66,7 @@ row-rule-color: var(--primaryColor);
 /* Multiple values */
 row-rule-color: red, transparent;
 row-rule-color: repeat(3, red), repeat(3, transparent);
-row-rule-color: repeat(3, red), repeat(3, yellowm, blue);
+row-rule-color: repeat(3, red), repeat(3, yellow, blue);
 row-rule-color: red, repeat(auto, transparent), red;
 row-rule-color: red, repeat(auto, blue, yellow), red;
 row-rule-color: repeat(3, red), repeat(auto, transparent), repeat(3, red);
@@ -87,7 +87,7 @@ The `row-rule-color` property accepts a comma-separated list of values, includin
   - : A {{cssxref("&lt;color&gt;")}} representing the color of the line.
 
 - `<repeat-line-color>`
-  - : A {{cssxref("repeat()")}} function, with the first parameter being an {{cssxref("&lt;integer&gt;")}} of `1` or more, representing the number of times the second parameter, a comma-separated list of {{cssxref("&lt;color&gt;")}} values, should be repeated.
+  - : A {{cssxref("repeat()")}} function, with an {{cssxref("&lt;integer&gt;")}} of `1` or more as the first argument and one or more `<color>` values as subsequent arguments. The `<integer>` specifies how many times the `<color>` values should be repeated.
 
 - `<auto-repeat-line-color>`
   - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and one or more `<color>` values as subsequent arguments. The provided `<color>` values are repeated as many times as needed to fill in values for any row-rules that are not explicitly specified by other components of the property value.
@@ -114,7 +114,7 @@ row-rule-color: blue, yellow;
 
 ### Repeated line colors
 
-The `repeat()` function, with an integer of `1` or greater as the first argument, can be used to repeat a valid list of CSS {{cssxref("&lt;color&gt;")}} values passed as the second argument the specified number of times. This allows the same color to be repeated a set number of times without repeating the same `<line-color>` multiple times. The following declarations are equivalent:
+The `repeat()` function, with an integer of `1` or greater as the first argument, can be used to repeat a valid list of CSS {{cssxref("&lt;color&gt;")}} values passed as subsequent arguments the specified number of times. This allows the same color to be repeated a set number of times without repeating the same `<line-color>` multiple times. The following declarations are equivalent:
 
 ```css
 row-rule-color: blue, yellow, red, yellow, red;
@@ -137,11 +137,11 @@ row-rule-color:
 
 This creates a list of five colors. If the number of colors in the `row-rule-color` value's color list exceeds the number of gaps between rows, the excess color values are ignored. If the container has three rows, the rule in the first gutter will be blue and the second yellow.
 
-If there are more gutters than colors, as there are no `repeat()` functions that include the keyword `auto`, the list of colors is repeated. If the container has 6, 11, 16, or 21 rows, this sequence of colors will be repeated one, two, three, or four times, respectively, with the last rule being red.
+If there are more gutters than colors, the list of colors is repeated until all row rules receive a color. If the container has 6, 11, 16, or 21 rows, this sequence of colors will be repeated one, two, three, or four times, respectively, with the last rule being red.
 
 ### Auto-repeating line colors
 
-The `repeat()` function also accepts `auto` as the first argument instead of a positive integer. With `auto` as the first argument, the `<color>` values passed as the second will be repeated as many times as needed to fill in values for any row-rules that are not explicitly specified by other components of the property value, if any.
+The `repeat()` function also accepts `auto` as the first argument instead of a positive integer. With `auto` as the first argument, the `<color>` values passed in subsequent arguments will be repeated as many times as needed to fill in values for any row-rules that are not explicitly specified by other components of the property value, if any.
 
 ```css
 row-rule-color: blue, repeat(auto, yellow), red;
@@ -232,13 +232,13 @@ ul {
 
 {{EmbedLiveSample("func", "", "180")}}
 
-The middle color is repeated three times. The flex container has six rows, so five gutters. The `repeat()` function repeats our second color three times, creating a color list with five colors. Since there are as many row gutters as there are total colors, the colors are not repeated.
+The flex container has six rows, so five gutters. The `repeat()` function repeats our second color three times, creating a color list with five colors. Since there are as many row gutters as there are total colors, the colors are not repeated.
 
 ### Using `auto` within `repeat()`
 
 This example demonstrates using `auto`, instead of an integer, within the `repeat()` function.
 
-Using `repeat(auto, <color>)` we set all the row rules to be almost transparent black (`#0003`), except the first and last, which we set to a solid `black`.
+Using `repeat(auto, <color>)`, we set all the row rules to be almost transparent black (`#0003`), except the first and last, which we set to a solid `black`.
 
 ```css live-sample___auto
 ul {

From 194ab043b5ebc68c22c2b8822782c575dee27f4d Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Wed, 15 Jul 2026 12:52:51 +0200
Subject: [PATCH 18/18] row rule v row-rule

---
 .../reference/properties/row-rule-color/index.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/files/en-us/web/css/reference/properties/row-rule-color/index.md b/files/en-us/web/css/reference/properties/row-rule-color/index.md
index f39f0d1b6c3f71f..b7ba30451b91439 100644
--- a/files/en-us/web/css/reference/properties/row-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-color/index.md
@@ -94,19 +94,19 @@ The `row-rule-color` property accepts a comma-separated list of values, includin
 
 ## Description
 
-The `row-rule-color` property defines the colors of any row rule lines drawn in the gaps between rows in [multi-column](/en-US/docs/Web/CSS/Guides/Multicol_layout), [flex](/en-US/docs/Web/CSS/Guides/Flexible_box_layout), and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) containers with more than one row.
+The `row-rule-color` property defines the colors of any lines drawn in the gaps between rows in [multi-column](/en-US/docs/Web/CSS/Guides/Multicol_layout), [flex](/en-US/docs/Web/CSS/Guides/Flexible_box_layout), and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) containers with more than one row.
 
 The value is a comma-separated list of components, which can include `<line-color>`, `<repeated-line-color>`, and `<auto-repeat-line-color>` types.
 
 The `row-rule-color`, along with the {{cssxref("row-rule-width")}} and {{cssxref("row-rule-style")}} properties, can be set using the {{cssxref("row-rule")}} shorthand. The `row-rule-color`, along with the {{cssxref("column-rule-color")}} property, can also be set using the {{cssxref("rule-color")}} shorthand.
 
-A `<line-color>` can be declared as any valid CSS {{cssxref("&lt;color&gt;")}} value. If the property value consists of only one `<color>`, all the row rules will be that color. If we declare the following, all row rules will be blue:
+A `<line-color>` can be declared as any valid CSS {{cssxref("&lt;color&gt;")}} value. If the property value consists of only one `<color>`, all the rule lines will be that color. If we declare the following, the lines will all be blue:
 
 ```css
 row-rule-color: blue;
 ```
 
-When more than one `<line-color>` is declared, they will be applied to row-rules in the order specified. If there are more row-rules than `<line-color>` values, the list of line colors is repeated until every row rule has a color. If we declare the following, for example, every odd rule will be blue, and every even rule will be yellow.
+When more than one `<line-color>` is declared, they will be applied to row-rules in the order specified. If there are more row-rules than `<line-color>` values, the list of line colors is repeated until every row-rule has a color. If we declare the following, for example, every odd rule will be blue, and every even rule will be yellow.
 
 ```css
 row-rule-color: blue, yellow;
@@ -137,7 +137,7 @@ row-rule-color:
 
 This creates a list of five colors. If the number of colors in the `row-rule-color` value's color list exceeds the number of gaps between rows, the excess color values are ignored. If the container has three rows, the rule in the first gutter will be blue and the second yellow.
 
-If there are more gutters than colors, the list of colors is repeated until all row rules receive a color. If the container has 6, 11, 16, or 21 rows, this sequence of colors will be repeated one, two, three, or four times, respectively, with the last rule being red.
+If there are more gutters than colors, the list of colors is repeated until all row-rules receive a color. If the container has 6, 11, 16, or 21 rows, this sequence of colors will be repeated one, two, three, or four times, respectively, with the last one being red.
 
 ### Auto-repeating line colors
 
@@ -147,9 +147,9 @@ The `repeat()` function also accepts `auto` as the first argument instead of a p
 row-rule-color: blue, repeat(auto, yellow), red;
 ```
 
-In this case, the first row rule will be blue, the last will be red, and all others will be yellow. It doesn't matter if the container has 3, 6, 11, 16, or 21 rows; the first will always be blue and, as long as there are at least two row-rules, the last will always be red. All the other row rules will be yellow, which means if there are only 2 or 3 rows, there will be no yellow row rules.
+In this case, the first row-rule will be blue, the last will be red, and all others will be yellow. It doesn't matter if the container has 3, 6, 11, 16, or 21 rows; the first will always be blue and, as long as there are at least two row-rules, the last will always be red. All the other rules will be yellow, which means if there are only 2 or 3 rows, there will be no yellow lines.
 
-The `auto` keyword within the `repeat()` function creates an auto-repeater that fills in values for row rules that would not otherwise receive values from other parts of the list, preventing the list from being cycled. At most, only one `repeat(auto, <color>)` can be present in a `row-rule-color` value.
+The `auto` keyword within the `repeat()` function creates an auto-repeater that fills in values for the row-rule line colors that would not otherwise receive values from other parts of the list, preventing the list from being cycled. A `row-rule-color` value can include, at most, one `repeat(auto, <color>)`.
 
 ## Formal definition
 
@@ -201,7 +201,7 @@ ul {
 
 ### Repeating values
 
-This example demonstrates how, when there are fewer values in the list of colors than row rules, the values are repeated.
+This example demonstrates how, when there are fewer values in the list of colors than gutters between rows, the values are repeated.
 
 Using the same HTML and CSS as in the previous example, we include three comma-separated colors as the `row-rule-color` value:
 
@@ -238,7 +238,7 @@ The flex container has six rows, so five gutters. The `repeat()` function repeat
 
 This example demonstrates using `auto`, instead of an integer, within the `repeat()` function.
 
-Using `repeat(auto, <color>)`, we set all the row rules to be almost transparent black (`#0003`), except the first and last, which we set to a solid `black`.
+Using `repeat(auto, <color>)`, we set all the lines to be almost transparent black (`#0003`), except the first and last, which we set to a solid `black`.
 
 ```css live-sample___auto
 ul {