Adding a single vertical divider between cards arranged in three columns sounds like a simple design request, yet implementation quickly becomes tedious. You attach a border-right to cards, remove it on the last one with :last-child, add a :nth-child because line wrapping changes the end element, and rewrite conditions whenever responsive breakpoints change the column count.
Even though what you want to draw lines on is not the cards, but the space between them, CSS lacked a way to decorate gaps directly for a long time. Consequently, developers borrowed adjacent elements to paint borders there. Workarounds like inserting an empty div solely for a divider line have been commonplace in practice.
A specification addressing this head-on landed in stable Chrome and Edge 149: CSS Gap Decorations (Gap decorations: Now available in Chromium — Chrome for Developers).
Gap Decorations draws lines directly in gaps
The mechanism is straightforward: specify rules directly on the gap of a grid or flex container.
The column-rule property existed previously, but its use was restricted to multi-column layouts (columns). Now, it works on grid and flex containers as well, joined by the newly introduced row-rule for drawing rules across horizontal gaps.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
/* 縦の隙間に線を引く */
column-rule: 1px solid #d8d8d8;
/* 横の隙間にも引く */
row-rule: 1px solid #d8d8d8;
}That is all. Nothing needs to be added to the cards. No overriding :last-child, and no wrap-aware :nth-child. Whether the column count changes or elements are added or removed, lines appear only where gaps exist.
A full suite of properties is also available to fine-tune appearance: row-rule-break and column-rule-break to determine whether rules break at gap intersections, row-rule-outset and column-rule-outset to control how far rules extend beyond gap edges, and gap-rule-paint-order to specify which rule paints on top where rows and columns cross. What used to be the most laborious part of implementation—how intersections look—can now be handled purely declaratively.
Can it be used in production today?
This requires an honest assessment. At present, only Chromium-based browsers are supported. It works in Chrome and Edge 149 and later, as well as Chromium-based browsers tracking them. Safari and Firefox do not support it yet, meaning it has not reached Baseline.
In other words, it is not yet at the stage where writing it as-is delivers the identical visual presentation to all users. Even so, this specification falls into a category that is relatively easy to adopt depending on usage. The reason is that dividers are usually decorative and not essential for conveying information.
| Application | Impact on unsupported browsers | Decision-Making |
|---|---|---|
| Visual dividers between cards | Lines simply do not appear, without breaking layout | Safe to use as-is |
| Dividers serving as table gridlines | Row and column relationships become harder to read | Requires traditional methods or fallbacks |
| Decorative lines acting as focal design elements | The intended visual impression is lost | Use traditional methods |
For cases in the first row—meaning lines where content remains readable whether they are present or not—using Gap Decorations directly while accepting that unsupported browsers will not show lines is entirely viable. It represents a clean form of progressive enhancement. Branching with @supports also lets you apply traditional implementations exclusively to unsupported environments.
@supports not (row-rule: 1px solid black) {
.cards > * + * {
border-top: 1px solid #d8d8d8;
}
}Development of polyfills for unsupported browsers is also underway. Because other browser engines have shown a positive stance toward this specification, browser support is expected to broaden going forward.
Decisions clients can make early to speed up delivery
When commissioning website development externally, this type of topic might seem like "something for the development agency to decide." However, having the client decide just one point upfront significantly accelerates progress: the scope of supported browsers.
Requirement definitions frequently specify "latest versions of major browsers," but when specifications like this emerge, that phrasing is equivalent to having decided nothing. Seeing lines appear in Chrome but not Safari prompts concerns that "this might be a bug," to which developers explain it conforms to specifications. This back-and-forth drains valuable time.
The following two points are worth defining in advance:
- Which browsers require an identical visual appearance (in most cases, checking actual analytics resolves this in minutes)
- The acceptable tolerance for visual discrepancies (e.g., decorative differences permitted, layout breakage not permitted)
With these established, development teams can judge whether to leverage new CSS features. A similar decision framework on adopting native standards versus relying on tools is covered in Tailwind or Standard CSS in 2026, while migrating JavaScript-dependent interactions back to CSS is demonstrated in CSS Native Carousel. For defining container shapes themselves in CSS via border-shape, refer to Slanted sections implemented as images.
Where to start
This is not the kind of change that warrants rewriting existing sites all at once. Where it shines is in screens you build from now on, and areas where implementation around divider lines has become tangled.
If CSS overriding lines with :last-child or :nth-child remains, that is an area prone to breaking with every revision. It breaks with minor changes like altering column counts or adding an element. The next time you touch that screen, shifting just the divider implementation to Gap Decorations will make subsequent maintenance much lighter.
If you want to identify which parts of your company website break during revisions before embarking on a redesign, GleamHub offers website production and renewal consultations. Because the optimal setup varies depending on requirements, we provide customized quotes. Please reach out via Contact Us.
