diff --git a/files/en-us/web/css/reference/properties/column-rule-color/index.md b/files/en-us/web/css/reference/properties/column-rule-color/index.md
index 52d80662445683f..c8e662175b4f432 100644
--- a/files/en-us/web/css/reference/properties/column-rule-color/index.md
+++ b/files/en-us/web/css/reference/properties/column-rule-color/index.md
@@ -7,24 +7,24 @@ browser-compat: css.properties.column-rule-color
 sidebar: cssref
 ---
 
-The **`column-rule-color`** [CSS](/en-US/docs/Web/CSS) property sets the color of the line drawn between columns in a multi-column layout.
+The **`column-rule-color`** [CSS](/en-US/docs/Web/CSS) property defines the colors of the lines drawn between columns in multi-column grid, flex, and multi-col layouts.
 
 {{InteractiveExample("CSS Demo: column-rule-color")}}
 
 ```css interactive-example-choice
-column-rule-color: red;
+column-rule-color: purple;
 ```
 
 ```css interactive-example-choice
-column-rule-color: rgb(48 125 222);
+column-rule-color: rgb(48 125 222), rgb(222 48 125);
 ```
 
 ```css interactive-example-choice
-column-rule-color: hsl(120 80% 40% / 0.6);
+column-rule-color: rgb(48 125 222), repeat(3, rgb(222 48 125));
 ```
 
 ```css interactive-example-choice
-column-rule-color: currentColor;
+column-rule-color: purple, repeat(auto, orange, yellow);
 ```
 
 ```html interactive-example
@@ -41,21 +41,30 @@ column-rule-color: currentColor;
 
 ```css interactive-example
 #example-element {
-  columns: 3;
-  column-rule: solid;
-  text-align: left;
+  columns: 7;
+  column-rule: solid thick;
+  gap: 7px;
 }
 ```
 
 ## Syntax
 
 ```css
-/* <color> values */
-column-rule-color: red;
+/* Single <color> value */
+column-rule-color: purple;
 column-rule-color: rgb(192 56 78);
 column-rule-color: transparent;
 column-rule-color: hsl(0 100% 50% / 60%);
 
+/* Multiple values */
+column-rule-color: purple, magenta;
+column-rule-color: repeat(3, purple), repeat(3, transparent);
+column-rule-color: repeat(3, purple), repeat(3, yellow, blue);
+column-rule-color: purple, repeat(auto, transparent), purple;
+column-rule-color: purple, repeat(auto, blue, yellow), purple;
+column-rule-color:
+  repeat(3, purple), repeat(auto, transparent), repeat(3, purple);
+
 /* Global values */
 column-rule-color: inherit;
 column-rule-color: initial;
@@ -64,12 +73,61 @@ column-rule-color: revert-layer;
 column-rule-color: unset;
 ```
 
-The `column-rule-color` property is specified as a single `<color>` value.
-
 ### Values
 
-- {{cssxref("&lt;color&gt;")}}
-  - : The color of the rule that separates columns.
+The `column-rule-color` property accepts a comma-separated list of values, including:
+
+- `<line-color>`
+  - : A {{cssxref("&lt;color&gt;")}} representing the color of the line.
+
+- `<repeat-line-color>`
+  - : 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 column-rules that are not explicitly specified by other components of the property value.
+
+## Description
+
+The `column-rule-color` property defines the colors of any lines drawn in the gaps between columns 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 column.
+
+The value is a comma-separated list of components, which can include `<line-color>`, `<repeat-line-color>`, and `<auto-repeat-line-color>` types.
+
+The `column-rule-color`, along with the {{cssxref("column-rule-width")}} and {{cssxref("column-rule-style")}} properties, can be set using the {{cssxref("column-rule")}} shorthand. The `column-rule-color`, along with the {{cssxref("row-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 rule lines will be that color. For example, if we declare the following, the lines in the gutters between columns will all be blue:
+
+```css
+column-rule-color: blue;
+```
+
+When more than one `<line-color>` is declared, they will be applied to lines painted in the column gutters in the order specified. If there are more rules than `<line-color>` values, the list of colors is repeated until every column-rule has a color. If we declare the following, for example, every odd rule will be red, and every even rule will be yellow.
+
+```css
+column-rule-color: red, 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 subsequent arguments the specified number of times. This allows the color values to be repeated as many times as you need without having to list them individually. The following declarations are equivalent:
+
+```css
+column-rule-color: blue, yellow, red, yellow, red;
+column-rule-color: blue, repeat(2, yellow, red);
+```
+
+This creates a list of five colors. If the number of colors in the `column-rule-color` value's color list exceeds the number of gaps between columns, the excess color values are ignored. If the container has three columns, the rule in the first gutter will be blue and the second yellow.
+
+### 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 subsequent arguments will be repeated as many times as needed to fill in values for any column-rules that are not explicitly specified by other components of the property value.
+
+```css
+column-rule-color: blue, repeat(auto, yellow), red;
+```
+
+In this case, the first column-rule will be blue, the last will be red, and all others will be yellow. As long as there are at least two column-rules, the first will always be blue and the last will always be red. All the other rules will be yellow, which means if there are only 2 or 3 columns, there will be no yellow lines.
+
+The `auto` keyword within the `repeat()` function creates an auto-repeater that fills in values for the column-rule line colors that would not otherwise receive values from other parts of the list, preventing the list from being cycled. A `column-rule-color` value can include, at most, one `repeat(auto, <color>)`.
 
 ## Formal definition
 
@@ -81,10 +139,14 @@ The `column-rule-color` property is specified as a single `<color>` value.
 
 ## Examples
 
-### Setting a blue column rule
+### Basic example
+
+In this example, we define a single color for the lines drawn between columns in a multi-column layout.
 
 #### HTML
 
+We include a paragraph of text.
+
 ```html
 <p>
   This is a bunch of text split into three columns. The `column-rule-color`
@@ -95,17 +157,156 @@ The `column-rule-color` property is specified as a single `<color>` value.
 
 #### CSS
 
+We define the {{htmlelement("p")}} element as a multi-column container. We include a {{cssxref("gap")}} of `7px` to provide padding for the `3px` dashed rule drawn between the columns:
+
 ```css
 p {
-  column-count: 3;
-  column-rule-style: solid;
+  column-count: 5;
+  gap: 7px;
+  column-rule-style: dashed;
+  column-rule-width: 3px;
+
   column-rule-color: blue;
 }
 ```
 
 #### Result
 
-{{EmbedLiveSample("Setting_a_blue_column_rule")}}
+{{EmbedLiveSample("Basic_example")}}
+
+### Multiple color values
+
+This example demonstrates declaring more than one color, and how the values are repeated when there are fewer values in the list of colors than gutters between columns.
+
+Using the same HTML and CSS as in the previous example, we include three comma-separated colors as the `column-rule-color` value:
+
+```html hidden
+<p>
+  This is a bunch of text split into three columns. The `column-rule-color`
+  property is used to change the color of the line that is drawn between
+  columns. Don't you think that's wonderful?
+</p>
+```
+
+```css hidden
+p {
+  column-count: 5;
+  gap: 7px;
+  column-rule-style: dashed;
+  column-rule-width: 3px;
+}
+
+@layer no-support {
+  @supports not (column-rule-color: red, blue) {
+    body::before {
+      content: "Your browser doesn't support multiple values for the column-rule-color property";
+      background-color: wheat;
+      display: block;
+      text-align: center;
+      padding: 1rem 0;
+    }
+  }
+}
+```
+
+```css
+p {
+  column-rule-color: blue, yellow, red;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("Multiple color values", "", "180")}}
+
+There are four gutters but only three colors, so the list gets repeated, with the first and fourth lines both being blue.
+
+### Using the `repeat()` function
+
+This example demonstrates using the `repeat()` function within the `column-rule-color` property value and how this function can help prevent complex values from becoming unwieldy.
+
+#### HTML
+
+We include a list of authors:
+
+```html live-sample___repeat live-sample___auto
+<ul>
+  <li>Kimberlé Crenshaw</li>
+  <li>Angela Y. Davis</li>
+  <li>Bernardine Evaristo</li>
+  <li>Audre Lorde</li>
+  <li>Cathy Park Hong</li>
+  <li>Zoya Patel</li>
+  <li>Juno Mac</li>
+  <li>Molly Smith</li>
+  <li>Tara Westover</li>
+</ul>
+```
+
+#### CSS
+
+We start by defining the list as a grid container, creating columns with the {{cssxref("grid-template-columns")}} property. We include a {{cssxref("gap")}} of `7px` to provide enough room between the columns to fit our `3px` dashed rule, and remove the bullets with {{cssxref("list-style-type")}} set to `none`.
+
+Then, 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 blue, red, and yellow colors. The yellow `color-mix()` color is within a `repeat()` function, set to repeat 3 times.
+
+We also added a border around each grid item so you can see how the line is rule in the middle of the gutter between the columns.
+
+```css live-sample___repeat live-sample___auto
+ul {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  gap: 7px;
+  list-style-type: none;
+  column-rule-style: dashed;
+  column-rule-width: 3px;
+
+  --base: yellow;
+  --mixin: blue;
+  column-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));
+}
+li {
+  border: 1px solid #ddd;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("repeat", "", "180")}}
+
+The grid has nine cells across, so eight gutters. The `repeat()` function repeats our two mixed color three times, creating a color list with seven colors. Since there are as more column gutters than list colors, the last color in the list is not used.
+
+### Using `auto` within `repeat()`
+
+This example demonstrates using `auto`, instead of an integer, within the `repeat()` function.
+
+We use the same HTML and CSS as in the previous examples, but override the `column-rule-color` value. Here, we use `repeat(auto, <color>)` to 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 {
+  column-rule-color: black, repeat(auto, #0003), black;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("auto", "", "180")}}
+
+```css hidden live-sample___repeat live-sample___auto
+@layer no-support {
+  @supports not (column-rule-color: repeat(3, red)) {
+    body::before {
+      content: "Your browser doesn't support `repeat()` functions within a column-rule-color property value";
+      background-color: wheat;
+      display: block;
+      text-align: center;
+      padding: 1rem 0;
+    }
+  }
+}
+```
 
 ## Specifications
 
@@ -118,4 +319,10 @@ p {
 ## See also
 
 - The {{cssxref("&lt;color&gt;")}} data type
-- Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, and {{cssxref("caret-color")}}
+- {{cssxref("column-rule-width")}}
+- {{cssxref("column-rule-style")}}
+- {{cssxref("row-rule-color")}}
+- {{cssxref("column-rule")}} shorthand
+- {{cssxref("rule-color")}} shorthand
+- {{cssxref("rule")}} shorthand
+- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module
diff --git a/files/en-us/web/css/reference/properties/column-rule-style/index.md b/files/en-us/web/css/reference/properties/column-rule-style/index.md
index 660a467fecfdfdb..5896295d929634c 100644
--- a/files/en-us/web/css/reference/properties/column-rule-style/index.md
+++ b/files/en-us/web/css/reference/properties/column-rule-style/index.md
@@ -7,55 +7,54 @@ browser-compat: css.properties.column-rule-style
 sidebar: cssref
 ---
 
-The **`column-rule-style`** [CSS](/en-US/docs/Web/CSS) property sets the style of the line drawn between columns in a multi-column layout.
+The **`column-rule-style`** [CSS](/en-US/docs/Web/CSS) property defines the line style of the lines drawn between columns in multi-column grid, flex, and multi-col layouts.
 
 {{InteractiveExample("CSS Demo: column-rule-style")}}
 
 ```css interactive-example-choice
-column-rule-style: none;
+column-rule-style: dotted;
 ```
 
 ```css interactive-example-choice
-column-rule-style: dotted;
+column-rule-style: dashed, dotted;
 ```
 
 ```css interactive-example-choice
-column-rule-style: solid;
+column-rule-style: repeat(2, inset, outset), double;
 ```
 
 ```css interactive-example-choice
-column-rule-style: double;
+column-rule-style: double, repeat(auto, dashed, solid), double;
 ```
 
 ```css interactive-example-choice
-column-rule-style: ridge;
-column-rule-color: #8888ff;
+column-rule-style: hidden;
 ```
 
 ```html interactive-example
 <section id="default-example">
   <p id="example-element">
-    London. Michaelmas term lately over, and the Lord Chancellor sitting in
-    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
-    as if the waters had but newly retired from the face of the earth, and it
-    would not be wonderful to meet a Megalosaurus, forty feet long or so,
-    waddling like an elephantine lizard up Holborn Hill.
+    London. Noel term lately over, and the Lord George sitting in Lincoln's Inn
+    Hall. Great May weather. As much mud in the streets as if the waters had but
+    newly retired from the face of the earth, and it would not be weird to meet
+    an platypus, two feet long or so, waddling like an lizard up Morgan Hill.
   </p>
 </section>
 ```
 
 ```css interactive-example
 #example-element {
-  columns: 3;
-  column-rule: solid;
-  text-align: left;
+  columns: 6;
+  column-rule-width: thick;
+  column-rule-color: teal;
+  gap: 7px;
 }
 ```
 
 ## Syntax
 
 ```css
-/* <'border-style'> values */
+/* One value */
 column-rule-style: none;
 column-rule-style: hidden;
 column-rule-style: dotted;
@@ -67,6 +66,11 @@ column-rule-style: ridge;
 column-rule-style: inset;
 column-rule-style: outset;
 
+/* Multiple values */
+column-rule-style: groove, double, dashed;
+column-rule-style: solid, repeat(5, ridge), solid;
+column-rule-style: dotted, repeat(auto, inset, outset), dotted;
+
 /* Global values */
 column-rule-style: inherit;
 column-rule-style: initial;
@@ -75,12 +79,63 @@ column-rule-style: revert-layer;
 column-rule-style: unset;
 ```
 
-The `column-rule-style` property is specified as a single `<'border-style'>` value.
-
 ### Values
 
-- `<'border-style'>`
-  - : Is a keyword defined by {{ cssxref("border-style") }} describing the style of the rule. The styling must be interpreted as in the collapsing border model.
+The `column-rule-style` property accepts a comma-separated list of values, including:
+
+- `<line-style>`
+  - : A {{cssxref("&lt;line-style&gt;")}}: one of `none`, `hidden`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, or `outset`. The default value is `none`.
+
+- `<repeat-line-style>`
+  - : A {{cssxref("repeat()")}} function, with the first argument being an {{cssxref("&lt;integer&gt;")}} of `1` or more, and subsequent arguments being {{cssxref("&lt;line-style&gt;")}} values. The integer specifies how many times the `<line-style>` values should be repeated.
+
+- `<auto-repeat-line-style>`
+  - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and one or more `<line-style>` values as subsequent arguments. The provided `<line-style>` values are repeated as many times as needed to fill in values for any column-rules that are not explicitly specified by other components of the property value.
+
+## Description
+
+The `column-rule-style` property defines the line style of any column rule lines drawn in the gaps between columns 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 column.
+
+The value is a comma-separated list of components, which can include `<line-style>`, `<repeat-line-style>`, and `<auto-repeat-line-style>` types.
+
+The `column-rule-style`, along with the {{cssxref("column-rule-color")}} and {{cssxref("column-rule-width")}} properties, can be set using the {{cssxref("column-rule")}} shorthand. The `column-rule-style`, along with the {{cssxref("row-rule-style")}} property, can also be set using the {{cssxref("rule-style")}} shorthand.
+
+If the property value has only one `<line-style>`, all the column rules will be that style. If we declare the following, all column rules will be `double`:
+
+```css
+column-rule-style: double;
+```
+
+When more than one `<line-style>` is declared, they will be applied to column-rules in the order specified. If there are more column-rules than `<line-style>` values, the list of line styles is repeated until every column rule has a style. If we declare the following, for example, every odd rule will be `double`, and every even rule will be `groove`.
+
+```css
+column-rule-style: double, groove;
+```
+
+### Repeated line styles
+
+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;line-style&gt;")}} values passed as subsequent arguments the specified number of times. This allows the same style to be repeated a set number of times without repeating the same value. You can include `<line-style>` keyword values or custom properties that resolve to a valid `<line-style>`. Using `repeat()` can make values easier to write, enabling recurring patterns to be written using a single function, regardless of the number of columns. The following declarations are equivalent:
+
+```css
+column-rule-style: solid, outset, inset, outset, inset;
+column-rule-style: solid, repeat(2, outset, inset);
+```
+
+This creates a list of five styles. If the number of styles in the `column-rule-style` value's style list exceeds the number of gaps between columns, the excess style values are ignored. If the container has three columns, the rule in the first gutter will be `solid` and the second `outset`.
+
+If there are more gutters than styles, the list of styles is repeated. If the container has 6, 11, 16, or 21 columns, this sequence of styles will be repeated one, two, three, or four times, respectively, with the last rule being `inset`.
+
+### Auto-repeating line styles
+
+The `repeat()` function also accepts `auto` as the first argument instead of a positive integer. With `auto` as the first argument, the `<line-style>` values passed as subsequent parameters will be repeated as many times as needed to fill in values for any column-rules that are not explicitly specified by other components of the property value.
+
+```css
+column-rule-style: solid, repeat(auto, dotted), solid;
+```
+
+In this case, it doesn't matter if the container has 3, 6, 11, 16, or 21 columns; the first and last column rules will always be `solid`, and all the other column rules will be `dotted`. If there are only 2 or 3 columns, there will be no dotted column rules.
+
+The `auto` keyword within the `repeat()` function creates an auto repeater that fills in values for column rules that would not otherwise receive values from other parts of the list, preventing the list from being cycled. Only one `repeat(auto, <line-style>)` is allowed within a `column-rule-style` value.
 
 ## Formal definition
 
@@ -92,7 +147,7 @@ The `column-rule-style` property is specified as a single `<'border-style'>` val
 
 ## Examples
 
-### Setting a dashed column rule
+### Basic usage
 
 #### HTML
 
@@ -115,7 +170,106 @@ p {
 
 #### Result
 
-{{ EmbedLiveSample('Setting_a_dashed_column_rule') }}
+{{ EmbedLiveSample('basic usage') }}
+
+### Multiple values
+
+#### HTML
+
+We include a list of authors:
+
+```html live-sample___multiple live-sample___repeat live-sample___func live-sample___auto
+<ul>
+  <li>Kimberlé Crenshaw</li>
+  <li>Angela Y. Davis</li>
+  <li>Bernardine Evaristo</li>
+  <li>Audre Lorde</li>
+  <li>Cathy Park Hong</li>
+  <li>Zoya Patel</li>
+  <li>Juno Mac</li>
+  <li>Molly Smith</li>
+  <li>Tara Westover</li>
+</ul>
+```
+
+#### CSS
+
+We define the list to be a flex container, creating columns by setting the {{cssxref("flex-direction")}} to `row` using the {{cssxref("flex-flow")}} shorthand. We include a {{cssxref("gap")}} of `5px` to provide enough room between the columns to fit our `3px` double teal rule:
+
+```css live-sample___multiple live-sample___repeat live-sample___func live-sample___auto
+ul {
+  display: flex;
+  flex-flow: row;
+  gap: 5px;
+  column-rule-width: 3px;
+  column-rule-color: teal;
+
+  column-rule-style:
+    dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("Multiple", "", "180")}}
+
+As there are more values (10) than gutters (8), the `none` and `hidden` values are not used.
+
+### Repeating values
+
+This example demonstrates how, when there are fewer values in the list of styles than column rules, the values are repeated.
+
+Using the same HTML and CSS as in the previous example, we include three comma-separated styles as the `column-rule-style` value:
+
+```css live-sample___repeat
+ul {
+  column-rule-style: solid, groove, double;
+}
+```
+
+{{EmbedLiveSample("Repeat", "", "180")}}
+
+### Using the `repeat()` function
+
+This example demonstrates using the `repeat()` function within the `column-rule-style` property value. We use the same HTML and CSS as in the previous examples. We include a `repeat()` function, setting the list of two `<line-style>` values to be repeated 3 times.
+
+```css live-sample___func live-sample___auto
+ul {
+  column-rule-style: solid, repeat(3, inset, outset), solid;
+}
+```
+
+{{EmbedLiveSample("func", "", "180")}}
+
+The flex container has six columns, so five gutters. The `repeat()` function repeats two style values three times, creating a list of eight style values, so the last three values in the list are discarded.
+
+### Using `auto` within `repeat()`
+
+This example demonstrates using `auto` instead of an integer within the `repeat()` function.
+
+Using `repeat(auto, <line-style>)` we set all column rules to `groove`, except the first and last, which we set to `solid`.
+
+```css live-sample___auto
+ul {
+  column-rule-style: solid, repeat(auto, groove), solid;
+}
+```
+
+{{EmbedLiveSample("auto", "", "180")}}
+
+```css hidden live-sample___multiple live-sample___repeat live-sample___func live-sample___auto
+@layer no-support {
+  @supports not (column-rule-style: solid, groove) {
+    body::before {
+      content: "Your browser doesn't support multiple values for the column-rule-style property";
+      background-color: wheat;
+      display: block;
+      text-align: center;
+      padding: 1rem 0;
+    }
+  }
+}
+```
 
 ## Specifications
 
@@ -127,7 +281,10 @@ p {
 
 ## See also
 
-- [Learn: Multiple-column Layout](/en-US/docs/Learn_web_development/Core/CSS_layout/Multiple-column_Layout)
-- {{CSSXref("column-rule")}}
-- {{CSSXref("column-rule-width")}}
-- {{CSSXref("column-rule-color")}}
+- {{cssxref("column-rule-color")}}
+- {{cssxref("column-rule-width")}}
+- {{cssxref("row-rule-style")}}
+- {{cssxref("column-rule")}} shorthand
+- {{cssxref("rule-style")}} shorthand
+- {{cssxref("rule")}} shorthand
+- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module
diff --git a/files/en-us/web/css/reference/properties/column-rule-width/index.md b/files/en-us/web/css/reference/properties/column-rule-width/index.md
index 55e005837d181c6..2bf405915452014 100644
--- a/files/en-us/web/css/reference/properties/column-rule-width/index.md
+++ b/files/en-us/web/css/reference/properties/column-rule-width/index.md
@@ -7,7 +7,7 @@ browser-compat: css.properties.column-rule-width
 sidebar: cssref
 ---
 
-The **`column-rule-width`** [CSS](/en-US/docs/Web/CSS) property sets the width of the line drawn between columns in a multi-column layout.
+The **`column-rule-width`** [CSS](/en-US/docs/Web/CSS) property defines the widths of the lines drawn between columns in multi-column grid, flex, and multi-col layouts.
 
 {{InteractiveExample("CSS Demo: column-rule-width")}}
 
@@ -16,34 +16,38 @@ column-rule-width: thin;
 ```
 
 ```css interactive-example-choice
-column-rule-width: medium;
+column-rule-width: 4px;
 ```
 
 ```css interactive-example-choice
-column-rule-width: thick;
+column-rule-width: thin, medium, thick;
+```
+
+```css interactive-example-choice
+column-rule-width: repeat(2, 1px, thick), 10px;
 ```
 
 ```css interactive-example-choice
-column-rule-width: 12px;
+column-rule-width: 10px, repeat(auto, 1px, 2px), 10px;
 ```
 
 ```html interactive-example
 <section id="default-example">
   <p id="example-element">
-    London. Michaelmas term lately over, and the Lord Chancellor sitting in
-    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
-    as if the waters had but newly retired from the face of the earth, and it
-    would not be wonderful to meet a Megalosaurus, forty feet long or so,
-    waddling like an elephantine lizard up Holborn Hill.
+    London. Noel term lately over, and the Lord George sitting in Lincoln's Inn
+    Hall. Great May weather. As much mud in the streets as if the waters had but
+    newly retired from the face of the earth, and it would not be weird to meet
+    an platypus, two feet long or so, waddling like an lizard up Morgan Hill.
   </p>
 </section>
 ```
 
 ```css interactive-example
 #example-element {
-  columns: 3;
-  column-rule: solid;
-  text-align: left;
+  columns: 6;
+  column-rule-style: solid;
+  column-rule-color: teal;
+  gap: 7px;
 }
 ```
 
@@ -54,10 +58,16 @@ column-rule-width: 12px;
 column-rule-width: thin;
 column-rule-width: medium;
 column-rule-width: thick;
+column-rule-width: thin, medium, thick;
+column-rule-width: thick, repeat(5, thin), thick;
+column-rule-width: thick, repeat(auto, thin, medium), thick;
 
-/* <length> values */
-column-rule-width: 1px;
-column-rule-width: 2.5em;
+/* Length values */
+column-rule-width: 0.1em;
+column-rule-width: 5px;
+column-rule-width: 1px, 3px, 5px;
+column-rule-width: 0.1rem, repeat(auto, 1px), 10px, 0.5rem;
+column-rule-width: 5px, repeat(5, 1px, 3px), 5px;
 
 /* Global values */
 column-rule-width: inherit;
@@ -67,12 +77,87 @@ column-rule-width: revert-layer;
 column-rule-width: unset;
 ```
 
-The `column-rule-width` property is specified as a single `<'border-width'>` value.
-
 ### Values
 
-- `<'border-width'>`
-  - : Is a keyword defined by {{ cssxref("border-width") }} describing the width of the rule. It may be either a {{cssxref("&lt;length&gt;")}} or one of the `thin`, `medium`, or `thick` keywords.
+The `column-rule-width` property accepts a comma-separated list of values, including:
+
+- `<line-width>`
+  - : A {{cssxref("&lt;line-width&gt;")}}: This can be one of the keywords `thin`, `medium`, or `thick`, or a positive {{cssxref("length")}} value, representing the width of the line. The default value is `medium`.
+
+- `<repeat-line-width>`
+  - : A {{cssxref("repeat()")}} function, with the first argument being an {{cssxref("&lt;integer&gt;")}} of `1` or more, and one or more {{cssxref("&lt;line-width&gt;")}} values as subsequent arguments. The integer defines the number of times the `<line-width>` values should be repeated.
+
+- `<auto-repeat-line-width>`
+  - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and one or more `<line-width>` values as subsequent arguments. The provided `<line-width>` values are repeated as many times as needed to fill in values for any column-rules that are not explicitly specified by other components of the property value.
+
+## Description
+
+The `column-rule-width` property defines the widths of any column rule lines drawn in the gutters between adjacent columns 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 column.
+
+> [!NOTE]
+> The `column-rule-width` only defines the width of the lines painted in the gaps. These lines have no effect on the [box model](/en-US/docs/Web/CSS/Guides/Box_model/Introduction) or layout. The size of the gutter is defined by the {{cssxref("gap")}} property; with the default value being `1em` on multi-column containers and `0` in all other contexts. If the width of a rule is wider than the {{cssxref("gap")}}, the line will be painted behind the column content.
+
+The value is a comma-separated list of components, which can include `<line-width>`, `<repeat-line-width>`, and `<auto-repeat-line-width>` types.
+
+The `column-rule-width`, along with the {{cssxref("column-rule-color")}} and {{cssxref("column-rule-style")}} properties, can also be set using the {{cssxref("column-rule")}} shorthand, while {{cssxref("rule-width")}} is a shorthand that sets both the `column-rule-width` and the {{cssxref("row-rule-width")}} properties.
+
+A `<line-width>` can be declared as any valid CSS {{cssxref("&lt;line-width&gt;")}} value: the keywords `thin`, `medium`, or `thick`, or a positive {{cssxref("length")}} value. Percentage values are invalid.
+
+If the property value consists of only one `<line-width>`, all the column rules will be that width. If we declare the following, all column rules will be `2px`:
+
+```css
+column-rule-width: 2px;
+```
+
+When more than one `<line-width>` is declared, they will be applied to column-rules in the order specified. If there are more column-rules than `<line-width>` values, the list of line widths is repeated until every rule has a width. If we declare the following, for example, every odd rule will be `thick`, and every even rule will be `0.25rem`.
+
+```css
+column-rule-width: thick, 0.25rem;
+```
+
+### Repeated line widths
+
+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;line-width&gt;")}} values passed as subsequent arguments the specified number of times. This allows the same width to be repeated a set number of times without repeating the same `<line-width>` multiple times. The following declarations are equivalent:
+
+```css
+column-rule-width: 1rem, thick, thin, thick, thin, thick, thin;
+column-rule-width: 1rem, repeat(3, thick, thin);
+```
+
+You can use any `<line-width>` values, including custom properties that resolve to a `<line-width>`. Using `repeat()` can make values easier to write, especially when using complex length calculations. It enables a recurring pattern to be written using a single function, regardless of the number of columns. The following declarations are equivalent:
+
+```css
+column-rule-width:
+  1rem, min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
+  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
+  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
+  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
+  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)), thin;
+column-rule-width:
+  1rem,
+  repeat(
+    5,
+    min(calc(var(--base) - 3px), 10px),
+    abs(calc(var(--secondary) - 30px))
+  ),
+  thin;
+```
+
+This creates a list of 12 widths. If the number of widths in the `column-rule-width` value's width list exceeds the number of gaps between columns, the excess width values are ignored. If the container has three columns, the rule in the first gutter will be `1rem` wide, and the second is determined by the {{cssxref("min()")}} function.
+
+If there are more gutters than widths, the list of widths is repeated. If the container has 13 or 25 columns, this sequence of widths will be repeated one or two, respectively, with the last rule being `thin`. For any other number of columns, up to 25, the last rule will not be `thin`.
+
+### Auto-repeating line widths
+
+The `repeat()` function also accepts `auto` as the first argument instead of a positive integer. With `auto` as the first argument, the list of `<line-width>` values passed as subsequent arguments will be repeated as many times as needed to fill in values for any column-rules that are not explicitly specified by other components of the property value.
+
+```css
+column-rule-width: 10px, repeat(auto, thin), 10px;
+```
+
+In this case, the first column rule will be `10px`, the last will be `10px`, and all others will be `thin`. It doesn't matter if the container has 3, 6, 11, 16, or 21 columns, the first and last columns will always be `10px`. Which means, if there are only 2 or 3 columns, there will be no thin-sized column rules.
+
+The `auto` keyword within the `repeat()` function creates an auto-repeater that fills in values for the row-rule line widths that would not otherwise receive values from other parts of the list, preventing the list from being cycled. A `column-rule-width` value can include, at most, one `repeat(auto, <line-width>)`.
 
 ## Formal definition
 
@@ -84,10 +169,14 @@ The `column-rule-width` property is specified as a single `<'border-width'>` val
 
 ## Examples
 
-### Setting a thick column rule
+### Basic usage
+
+This example demonstrates using a single keyword value, setting all the column rules to the same size.
 
 #### HTML
 
+We include a paragraph of text:
+
 ```html
 <p>
   This is a bunch of text split into three columns. The `column-rule-width`
@@ -98,17 +187,141 @@ The `column-rule-width` property is specified as a single `<'border-width'>` val
 
 #### CSS
 
+We create a multi-column container with the {{cssxref("column-count")}} property. As the {{cssxref("column-rule-style")}} property defaults to `none`, we have to set it to a visible value for the column rules to be drawn. We then set the `column-rule-width` to `thick`, letting the {{cssxref("column-rule-color")}} default to `currentcolor`.
+
 ```css
 p {
   column-count: 3;
   column-rule-style: solid;
+
   column-rule-width: thick;
 }
 ```
 
 #### Result
 
-{{EmbedLiveSample("Setting_a_thick_column_rule")}}
+{{EmbedLiveSample("Basic usage")}}
+
+In multi-column layouts, the {{cssxref("gap")}} property defaults to `1em`, which is wider than our `column-rule-width`, so the lines are not drawn over our content.
+
+### Multiple values
+
+This example demonstrates using multiple values for the `column-rule-width` property. It also demonstrates rules that overflow gaps are painted behind the content.
+
+#### HTML
+
+We include a list of authors:
+
+```html live-sample___basic live-sample___repeat live-sample___func live-sample___auto
+<ul>
+  <li>Kimberlé Crenshaw</li>
+  <li>Angela Y. Davis</li>
+  <li>Bernardine Evaristo</li>
+  <li>Audre Lorde</li>
+  <li>Cathy Park Hong</li>
+  <li>Zoya Patel</li>
+  <li>Juno Mac</li>
+  <li>Molly Smith</li>
+  <li>Tara Westover</li>
+</ul>
+```
+
+#### CSS
+
+We define the list to be a flex container, creating columns by setting the {{cssxref("flex-direction")}} to `row` using the {{cssxref("flex-flow")}} shorthand. We include a `column-rule-width` with ten `<line-width>` values, each larger than the previous.
+
+```css live-sample___basic live-sample___repeat live-sample___func live-sample___auto
+ul {
+  display: flex;
+  flex-flow: row;
+  list-style-type: none;
+  column-rule-style: solid;
+  column-rule-color: teal;
+
+  column-rule-width: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("Basic", "", "180")}}
+
+As there are more values (10) than gutters (8), the `9px` and `10px` values are not used.
+
+The {{cssxref("gap")}} defaults to `normal` which resolves to `0` in flexbox. The `column-rule-width` only defines the width of a painted line and does not impact the layout. The lines are drawn behind the content.
+
+### Repeating values
+
+This example demonstrates how, when there are fewer values in the list of widths than column rules, the values are repeated.
+
+Using the same HTML and CSS as in the previous example, we include three comma-separated widths as the `column-rule-width` value:
+
+```css live-sample___repeat
+ul {
+  column-rule-width: 1px, 5px, 10px;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("Repeat", "", "180")}}
+
+### Using the `repeat()` function
+
+This example demonstrates using the `repeat()` function within the `column-rule-width` property value and how this function can help reduce the verbosity of value declarations.
+
+We use the same HTML and CSS as in the previous examples. To demonstrate how values can become verbose and the utility of the `repeat()` function, we declare two custom properties, which we use in `repeat()` function declarations. The `repeat()` function sets the list of two `<line-width>` values to repeat 3 times.
+
+```css live-sample___func live-sample___auto
+ul {
+  --base: 0.5vw;
+  --secondary: 1vw;
+  column-rule-width:
+    15px,
+    repeat(
+      4,
+      min(calc(var(--secondary) + 3px), 10px),
+      abs(calc(var(--base) - 2px))
+    ),
+    15px;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("func", "", "180")}}
+
+The flex container has nine columns, so eight gutters. The `repeat()` function repeats two width values four times, creating a list of ten width values. As there are fewer column gutters than total widths, the last two values in the list are discarded.
+
+### Using `auto` within `repeat()`
+
+This example demonstrates using `auto` instead of an integer within the `repeat()` function.
+
+Using `repeat(auto, <line-width>)` we set all column rules to `1px`, except the first and last, which we set to `5px`.
+
+```css live-sample___auto
+ul {
+  column-rule-width: 5px, repeat(auto, 1px), 5px;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("auto", "", "180")}}
+
+```css hidden live-sample___basic live-sample___repeat live-sample___func live-sample___auto
+@layer no-support {
+  @supports not (column-rule-width: thin, thick) {
+    body::before {
+      content: "Your browser doesn't support the column-rule-width property";
+      background-color: wheat;
+      display: block;
+      text-align: center;
+      padding: 1rem 0;
+    }
+  }
+}
+```
 
 ## Specifications
 
@@ -120,7 +333,10 @@ p {
 
 ## See also
 
-- [Learn: Multiple-column Layout](/en-US/docs/Learn_web_development/Core/CSS_layout/Multiple-column_Layout)
-- {{CSSXref("column-rule-style")}}
-- {{CSSXref("column-rule-color")}}
-- {{CSSXref("column-rule")}}
+- {{cssxref("column-rule-color")}}
+- {{cssxref("column-rule-style")}}
+- {{cssxref("column-rule")}} shorthand
+- {{cssxref("row-rule-width")}}
+- {{cssxref("rule-width")}} shorthand
+- {{cssxref("rule")}} shorthand
+- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module
diff --git a/files/en-us/web/css/reference/properties/column-rule/index.md b/files/en-us/web/css/reference/properties/column-rule/index.md
index 2293d8684d3d06c..d54e2124fb16cda 100644
--- a/files/en-us/web/css/reference/properties/column-rule/index.md
+++ b/files/en-us/web/css/reference/properties/column-rule/index.md
@@ -7,43 +7,52 @@ browser-compat: css.properties.column-rule
 sidebar: cssref
 ---
 
-The **`column-rule`** [shorthand](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property sets the width, style, and color of the line drawn between columns in a multi-column layout.
+The **`column-rule`** [shorthand](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property sets the width, style, and color of the lines drawn between columns in multi-column grid, flex, and multi-col layouts.
 
 {{InteractiveExample("CSS Demo: column-rule")}}
 
 ```css interactive-example-choice
-column-rule: dotted;
+column-rule: solid;
 ```
 
 ```css interactive-example-choice
-column-rule: solid 6px;
+column-rule: groove 0.8em teal;
 ```
 
 ```css interactive-example-choice
-column-rule: solid blue;
+column-rule:
+  dotted thick teal,
+  repeat(3, dashed pink 1px, outset olive 5px);
 ```
 
 ```css interactive-example-choice
-column-rule: thick inset blue;
+column-rule:
+  dotted thick teal,
+  repeat(auto, dashed pink 1px, dashed pink 5px),
+  dotted thick teal;
+```
+
+```css interactive-example-choice
+column-rule:
+  dashed medium olive,
+  repeat(auto, dotted pink 1px),
+  inset orange 5px;
 ```
 
 ```html interactive-example
 <section id="default-example">
   <p id="example-element">
-    London. Michaelmas term lately over, and the Lord Chancellor sitting in
-    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
-    as if the waters had but newly retired from the face of the earth, and it
-    would not be wonderful to meet a Megalosaurus, forty feet long or so,
-    waddling like an elephantine lizard up Holborn Hill.
+    London. Lady Catnip sitting in Lincoln's Inn Hall. Nice May weather. As much
+    mud in the streets as if the waters had but newly retired from the face of
+    the earth, and it would not be great to meet a Fred, two feet long or so,
+    waddling like an iguana up Holborn Hill.
   </p>
 </section>
 ```
 
 ```css interactive-example
 #example-element {
-  columns: 3;
-  column-rule: solid;
-  text-align: left;
+  columns: 7;
 }
 ```
 
@@ -58,10 +67,24 @@ This property is a shorthand for the following CSS properties:
 ## Syntax
 
 ```css
-column-rule: dotted;
-column-rule: solid 8px;
-column-rule: solid blue;
-column-rule: thick inset blue;
+/* One value */
+column-rule: dashed;
+column-rule: inset 8px;
+column-rule: solid teal;
+column-rule: thick outset rgb(18 122 67);
+
+/* Multiple values */
+column-rule: groove, dashed, solid;
+column-rule:
+  dotted medium teal,
+  dashed pink 0.5em,
+  outset olive 1px;
+column-rule:
+  solid #0ff,
+  repeat(3, dashed pink 1px, outset olive 5px);
+column-rule:
+  inset 3px yellow,
+  repeat(auto, dashed pink 1px, groove olive 5px);
 
 /* Global values */
 column-rule: inherit;
@@ -73,14 +96,81 @@ column-rule: unset;
 
 ### Values
 
-The `column-rule` property is specified as one, two, or three of the values listed below, in any order.
+The `column-rule` property accepts a comma-separated list of values, including:
+
+- `<gap-rule>`
+  - : Specified as one, two, or three of the values listed below, in any order.
+    - `<'line-width'>`
+      - : A {{cssxref("&lt;line-width&gt;")}}: This can be one of the keywords `thin`, `medium`, or `thick`, or a positive {{cssxref("length")}} value, representing the width of the line. The default value is `medium`.
+    - `<'line-style'>`
+      - : A {{cssxref("&lt;line-style&gt;")}}: one of `none`, `hidden`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, or `outset`. The default value is `none`. See {{cssxref("column-rule-style")}}.
+    - `<'color'>`
+      - : A {{cssxref("&lt;color&gt;")}} value representing the color of the line. The default value is `currentcolor`. See {{cssxref("column-rule-color")}}.
+
+- `<gap-repeat-rule>`
+  - : A {{cssxref("repeat()")}} function, with an {{cssxref("&lt;integer&gt;")}} of `1` or more as the first argument and one or more `<gap-rule>` values as subsequent arguments. The `<integer>` specifies how many times the list of `<gap-rule>` values should be repeated.
+
+- `<gap-auto-repeat-rule>`
+  - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and one or more `<gap-rule>` values as subsequent arguments. The provided list of `<gap-rule>` values is repeated as many times as needed to fill in values for any column-rules that are not explicitly specified by other components of the property value.
+
+## Description
+
+The `column-rule` property defines the line style of any rule lines drawn in the gaps between columns 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 column.
+
+The `column-rule` is shorthand for {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}}, and {{cssxref("column-rule-width")}}. The `column-rule`, along with the {{cssxref("row-rule")}} shorthand property, can also be set using the {{cssxref("rule")}} shorthand.
+
+The property value is a comma-separated list of components, which can include `<gap-rule>`, `<gap-repeat-rule>`, and `<gap-auto-repeat-rule>` types. Each `<gap-rule>` defines the width, color, and style of one or more rule lines.
+
+If the property value consists of only one `<gap-rule>`, all the column rules will be that style. If we declare the following, all column rules will be `dashed maroon 3px`:
+
+```css
+column-rule: dashed maroon 3px;
+```
+
+When more than one `<gap-rule>` is declared, they will be applied to column-rules in the order specified. If there are more gutters between columns than `<gap-rule>` values, the list of values is repeated until every column rule has a gap line. If we declare the following, for example, every odd rule will be `dashed maroon 3px`, and every even rule will be `dotted navy 5px`.
+
+```css
+column-rule:
+  dashed maroon 3px,
+  dotted navy 5px;
+```
+
+### Repeated line styles
+
+The `repeat()` function, with an integer of `1` or greater as the first argument, can be used to repeat a valid list of CSS [`<gap-rule>`](#gap-rule) values passed as subsequent arguments the specified number of times. This allows the same `<gap-rule>` to be repeated a set number of times without repeating the same CSS multiple times. The following declarations are equivalent:
+
+```css
+column-rule:
+  solid maroon 5px,
+  outset navy 10px,
+  inset olive 1px,
+  outset navy 10px,
+  inset olive 1px,
+  outset navy 10px,
+  inset olive 1px;
+column-rule:
+  solid maroon 5px,
+  repeat(3, outset navy 10px, inset olive 1px);
+```
+
+This creates a list of seven rules. If the number of styles in the `column-rule` value's style list exceeds the number of gaps between columns, the excess style values are ignored. If the container on which this is applied has three columns, the rule in the first gutter will be `solid maroon 5px` and the second `outset navy 10px`.
+
+If there are more gutters than styles, the list of styles is repeated. If the container has 8, 15, 22, or 29 columns, this sequence of styles will be repeated one, two, three, or four times, respectively, with the last rule being `inset olive 1px`.
+
+### Auto-repeating line styles
+
+The `repeat()` function also accepts `auto` as the first argument instead of a positive integer. With `auto` as the first argument, the [`<gap-rule>`](#gap-rule) values passed as subsequent arguments will be repeated as many times as needed to fill in values for any rules that are not explicitly specified by other components of the property value.
+
+```css
+column-rule:
+  solid maroon 5px,
+  repeat(auto, dotted olive 1px, dashed navy 1px),
+  solid maroon 5px;
+```
+
+In this case, the first and last column rules will be `solid maroon 5px`, and all others will alternate between `dotted olive 1px` and `dashed navy 1px`. It doesn't matter if the container has 3, 6, 11, 16, or 21 columns; the first and last gutters will always have a thick solid maroon line painted between them (unless {{cssxref("column-rule-visibility-items")}} leads to no line being drawn), and all the other column rules will be thin, dotted olive or dashed navy lines. If there are only 2 or 3 columns, there will be no dotted or dashed lines.
 
-- `<'column-rule-width'>`
-  - : Is a {{cssxref("&lt;length&gt;")}} or one of the three keywords, `thin`, `medium`, or `thick`. See {{cssxref("border-width")}} for details.
-- `<'column-rule-style'>`
-  - : See {{cssxref("border-style")}} for possible values and details.
-- `<'column-rule-color'>`
-  - : Is a {{cssxref("&lt;color&gt;")}} value.
+The `auto` keyword within the `repeat()` function creates an auto-repeater that fills in values for column 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, <gap-rule>)` can be present in a `column-rule` value.
 
 ## Formal definition
 
@@ -92,55 +182,114 @@ The `column-rule` property is specified as one, two, or three of the values list
 
 ## Examples
 
-### Example 1
+### Basic example
 
-```css
-/* Same as "medium dotted currentColor" */
-p.foo {
-  column-rule: dotted;
-}
+In this example, we define a single rule for the lines drawn between flex items.
 
-/* Same as "medium solid blue" */
-p.bar {
-  column-rule: solid blue;
-}
+#### HTML
 
-/* Same as "8px solid currentColor" */
-p.baz {
-  column-rule: solid 8px;
-}
+We include a list of authors:
+
+```html live-sample___basic live-sample___repeat live-sample___func live-sample___auto
+<ul>
+  <li>Kimberlé Crenshaw</li>
+  <li>Angela Y. Davis</li>
+  <li>Bernardine Evaristo</li>
+  <li>Audre Lorde</li>
+  <li>Cathy Park Hong</li>
+  <li>Zoya Patel</li>
+  <li>Juno Mac</li>
+  <li>Molly Smith</li>
+  <li>Tara Westover</li>
+</ul>
+```
+
+#### CSS
 
-p.abc {
-  column-rule: thick inset blue;
+We define the list to be a flex container, creating columns by setting the {{cssxref("flex-direction")}} to `row` using the {{cssxref("flex-flow")}} shorthand. We include a {{cssxref("gap")}} of `12px` to provide enough room between the columns to fit our `10px groove maroon` rule:
+
+```css live-sample___basic live-sample___repeat live-sample___func live-sample___auto
+ul {
+  display: flex;
+  flex-flow: row;
+  gap: 12px;
+  list-style-type: none;
+
+  column-rule: 10px groove maroon;
 }
 ```
 
-### Example 2
+#### Result
 
-#### HTML
+{{EmbedLiveSample("Basic", "", "180")}}
 
-```html
-<p class="content-box">
-  This is a bunch of text split into three columns. Take note of how the
-  `column-rule` property is used to adjust the style, width, and color of the
-  rule that appears between the columns.
-</p>
+### Repeating values
+
+This example demonstrates how the values are repeated when there are fewer values in the list of styles than column rules. It also demonstrates the default values for the width, color, and style of `medium`, `currentcolor` and `none`, respectively.
+
+Using the same HTML and CSS as in the previous example, we include four comma-separated `<gap-rule>` values as the `column-rule` value, omitting the width in the first `<gap-rule>`, the color in the second, and the style from the third, with the fourth including all three components:
+
+```css live-sample___repeat
+ul {
+  column-rule:
+    maroon dashed,
+    1px dotted,
+    5px teal,
+    10px orange solid;
+}
 ```
 
-#### CSS
+{{EmbedLiveSample("Repeat", "", "180")}}
 
-```css
-.content-box {
-  padding: 0.3em;
-  background: #ffff77;
-  column-count: 3;
-  column-rule: inset 2px #3333ff;
+The maroon line is `3px` wide. The dotted line is the same color as the text. There are no teal lines, as the `<line-style>` of the third `<gap-rule>` defaults to `none`, so no line is painted. There are more gutters than `<gap-rule>` values, so the list of values gets repeated.
+
+### Using the `repeat()` function
+
+This example demonstrates using the `repeat()` function within the `column-rule` property value. We use the same HTML and CSS as in the previous examples. We include a `repeat()` function, setting the list of two `<gap-rule>` values to repeat four times.
+
+```css live-sample___func live-sample___auto
+ul {
+  column-rule:
+    10px maroon dashed,
+    repeat(4, dotted olive 3px, dashed teal 3px),
+    10px maroon dashed;
 }
 ```
 
-#### Result
+{{EmbedLiveSample("func", "", "180")}}
+
+The flex container has nine columns, so eight gutters. The `repeat()` function repeats two style values four times, creating a list of ten `<gap-rule>` values. As there are fewer column gutters than total `<gap-rule>` values, the last two values in the list are discarded.
+
+### Using `auto` within `repeat()`
 
-{{EmbedLiveSample('Example_2')}}
+This example demonstrates using the `auto` argument instead of an integer in the `repeat()` function.
+
+Using `repeat(auto, <gap-rule>)`, we set all column rules to `1px dotted` and default to the current color, except the first and last, which we set to `10px groove maroon`.
+
+```css live-sample___auto
+ul {
+  column-rule:
+    10px groove maroon,
+    repeat(auto, 3px dotted maroon),
+    10px groove maroon;
+}
+```
+
+{{EmbedLiveSample("auto", "", "180")}}
+
+```css hidden live-sample___basic live-sample___repeat live-sample___func live-sample___auto
+@layer no-support {
+  @supports not (column-rule: thin, thick) {
+    body::before {
+      content: "Your browser doesn't support multiple values for the column-rule property";
+      background-color: wheat;
+      display: block;
+      text-align: center;
+      padding: 1rem 0;
+    }
+  }
+}
+```
 
 ## Specifications
 
@@ -152,7 +301,9 @@ p.abc {
 
 ## See also
 
-- {{CSSXref("column-rule-style")}}
-- {{CSSXref("column-rule-width")}}
-- {{CSSXref("column-rule-color")}}
+- {{cssxref("column-rule-color")}}
+- {{cssxref("column-rule-width")}}
+- {{cssxref("column-rule-style")}}
+- {{cssxref("row-rule")}} shorthand
+- {{cssxref("rule")}} shorthand
 - [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module
diff --git a/files/en-us/web/css/reference/properties/row-rule-style/index.md b/files/en-us/web/css/reference/properties/row-rule-style/index.md
index 6234c23997913d8..1e249ee1a915d08 100644
--- a/files/en-us/web/css/reference/properties/row-rule-style/index.md
+++ b/files/en-us/web/css/reference/properties/row-rule-style/index.md
@@ -79,7 +79,7 @@ row-rule-style: unset;
 The `row-rule-style` property accepts a comma-separated list of values, including:
 
 - `<line-style>`
-  - : A {{cssxref("&lt;line-style&gt;")}}: one of `none`, `hidden`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, or `outset`. The default value is`none`.
+  - : A {{cssxref("&lt;line-style&gt;")}}: one of `none`, `hidden`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, or `outset`. The default value is `none`.
 
 - `<repeat-line-style>`
   - : A {{cssxref("repeat()")}} function, with the first argument being an {{cssxref("&lt;integer&gt;")}} of `1` or more, and subsequent arguments being {{cssxref("&lt;line-style&gt;")}} values. The integer specifies how many times the `<line-style>` values should be repeated.
@@ -201,8 +201,6 @@ This example demonstrates using the `repeat()` function within the `row-rule-sty
 
 ```css live-sample___func live-sample___auto
 ul {
-  --base: 0.5vw;
-  --secondary: 1vw;
   row-rule-style: double, repeat(3, inset, dashed), double;
 }
 ```
diff --git a/files/en-us/web/css/reference/values/line-style/index.md b/files/en-us/web/css/reference/values/line-style/index.md
index 0aa7bcabc8187cd..1b71628ddebd1f5 100644
--- a/files/en-us/web/css/reference/values/line-style/index.md
+++ b/files/en-us/web/css/reference/values/line-style/index.md
@@ -8,7 +8,7 @@ spec-urls: https://drafts.csswg.org/css-backgrounds/#typedef-line-style
 sidebar: cssref
 ---
 
-The **`<line-style>`** {{glossary("enumerated")}} value type represents keyword values that define the style of a line, or the lack of a line. The `<line-style>` keyword values are used in the following longhand and shorthand [border](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders) and [column](/en-US/docs/Web/CSS/Guides/Multicol_layout) properties:
+The **`<line-style>`** {{glossary("enumerated")}} value type represents keyword values that define the style of a line, or the lack of a line. The `<line-style>` keyword values are used in the following longhand and shorthand [border](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders) and [gap decoration](/en-US/docs/Web/CSS/Guides/Gaps) properties:
 
 - {{cssxref("border")}}, {{cssxref("border-style")}}
 - {{cssxref("border-block")}}, {{cssxref("border-block-style")}}
@@ -22,6 +22,7 @@ The **`<line-style>`** {{glossary("enumerated")}} value type represents keyword
 - {{cssxref("border-right")}}, {{cssxref("border-right-style")}}
 - {{cssxref("border-top")}}, {{cssxref("border-top-style")}}
 - {{cssxref("column-rule")}}, {{cssxref("column-rule-style")}}
+- {{cssxref("row-rule")}}, {{cssxref("row-rule-style")}}
 
 ## Syntax
 
@@ -271,4 +272,5 @@ Notice that the almost-black color of `#000001` may be different from the actual
 
 - [CSS backgrounds and borders](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders) module
 - [CSS basic user interface](/en-US/docs/Web/CSS/Guides/Basic_user_interface) module
+- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module
 - [CSS multi-column layout](/en-US/docs/Web/CSS/Guides/Multicol_layout) module