Page updates: column-rule-* by estelle · Pull Request #44755 · mdn/content

estelle · 2026-07-16T19:49:13Z

This PR includes a complete revision of four existing pages:

column-rule
column-rule-style
column-rule-width

The CSS gaps module page is already live.
That previous PR included the task of "Update pages to correct module (gap has been moved from mod to mod)"

This starts the section of openwebdocs/project#238 of "Update pages to new definition"

github-actions · 2026-07-16T19:50:57Z

Preview URLs (6 pages)

Flaws (25)

Note! 1 document with no flaws that don't need to be listed. 🎉

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Reference/Properties/column-rule
Title: column-rule CSS property
Flaw count: 4

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/line-width which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve
- Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/number-token which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve

URL: /en-US/docs/Web/CSS/Reference/Properties/column-rule-color
Title: column-rule-color CSS property
Flaw count: 4

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-color which doesn't resolve
- Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/number-token which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-color which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve

URL: /en-US/docs/Web/CSS/Reference/Properties/column-rule-style
Title: column-rule-style CSS property
Flaw count: 5

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/line-width which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-style which doesn't resolve
- Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/number-token which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-style which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve

URL: /en-US/docs/Web/CSS/Reference/Properties/column-rule-width
Title: column-rule-width CSS property
Flaw count: 8

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/line-width which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/line-width which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-width which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/line-width which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/line-width which doesn't resolve
- and 3 more flaws omitted

URL: /en-US/docs/Web/CSS/Reference/Properties/row-rule-style
Title: row-rule-style CSS property
Flaw count: 4

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-style which doesn't resolve
- Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/number-token which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule-style which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve

External URLs (3)

URL: /en-US/docs/Web/CSS/Reference/Properties/row-rule-style
Title: row-rule-style CSS property

https://drafts.csswg.org/css-borders-4/ (1 time)
https://drafts.csswg.org/css-gaps-1/ (1 time)
https://drafts.csswg.org/css-values-4/ (1 time)

(comment last updated: 2026-07-18 22:56:40)

hamishwillee · 2026-07-17T00:05:41Z

-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")}}


FYI the example is too wide for the page. That makes it hard to be precisely sure of the behaviour.

made it narrower, but i can't overflow because that property breaks the interactive example

hamishwillee · 2026-07-17T00:11:49Z

+
+The value is a comma-separated list of components, which can include `<line-color>`, `<repeated-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.


FYI {{cssxref("rule-color")}} is a redlink

not done yet openwebdocs/project#238

hamishwillee · 2026-07-17T00:19:50Z

@@ -46,16 +45,17 @@ column-rule-color: #8888ff;

 ```css interactive-example
 #example-element {


Line duplicated below

Suggested change

#example-element {

this is what made the example fail.

hamishwillee · 2026-07-17T00:24:37Z

+
+#### Result
+
+{{EmbedLiveSample("Multiple", "", "180")}}


FWIW the use of multiple here seems to work. The https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Live_samples doesn't state whether the identifier is case sensitive or not.

They are not case sensitive. EmbedLiveSample first parameter is very forgiving actually

hamishwillee · 2026-07-17T00:32:47Z

+  min(calc(var(--base) - 3px), 10px),
+  abs(calc(var(--secondary) - 30px)),
+  min(calc(var(--base) - 3px), 10px),
+  abs(calc(var(--secondary) - 30px)) thin;


Is this line valid? Might need a comma before thin if the next example is correct.

hamishwillee · 2026-07-17T00:39:21Z

+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. It doesn't matter if the container has; the first will always be blue and, as long as there are at least two column-rules, 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.


What does this mean?

It doesn't matter if the container has;

As long as there are at least two column-rules, the first will always be blue and the last will always be red.

hamishwillee · 2026-07-17T00:40:34Z

+  --base: 0.5vw;
+  --secondary: 1vw;


Claude says these are unused elsewhre in the example (copy paste)

hamishwillee

@estelle Do you have Claude? Running a prompt such as "Review this for spelling and grammar issues" caught quite a few typos.

Still going on my own review ("does it make sense to me as a reader")

hamishwillee · 2026-07-17T01:00:40Z

+
+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.


FWIW I think using the color mix here distracts from the example - its just extra noise.

it's actually intentional to show that it helps make ridiculous code less ridiculous

hamishwillee · 2026-07-17T01:01:48Z

-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")}}


Doesnt work at all because only one column is displayed.

hamishwillee · 2026-07-17T01:03:23Z

 ---

-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.


I "fixed" other example of multi-col layouts to multi-column layouts. If this is reasonable, also needs to be fixed everywhere.

it think it needs to be multi-col. it was multi-col, and it reads "multi-column grid" in the same sentence, so needs to be differentiated

hamishwillee · 2026-07-17T01:08:56Z

-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")}}


Example too narrow for page.

yeah, but i have to keep it b/c we need to show repeat. and adding overflow breaks the examples.

hamishwillee · 2026-07-17T01:17:25Z

@@ -7,43 +7,52 @@ browser-compat: css.properties.column-rule
 sidebar: cssref


Page looks good/consistent. FWIW a few redlinks, but I am sure you know about those.

hamishwillee

@estelle I copied some but not all fix suggestions from #44725 - please make sure the common problem fixes are captured. Chris and I found similar issues - up to you, but I generally prefer his suggestions.

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>

github-actions · 2026-07-18T22:03:59Z

+  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;


[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

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;

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;

estelle added 2 commits July 16, 2026 13:45

Page updates: column-rule-*

52cebc4

Page updates: column-rule-*

9905b09

estelle requested a review from a team as a code owner July 16, 2026 19:49

estelle requested review from hamishwillee and removed request for a team July 16, 2026 19:49

github-actions Bot added Content:CSS Cascading Style Sheets docs size/l [PR only] 501-1000 LoC changed labels Jul 16, 2026

estelle mentioned this pull request Jul 16, 2026

CSS Gaps 1 openwebdocs/project#238

Open

61 tasks