Divide color
Set the border color of later visible siblings between grouped items.
Set the border color on later visible direct children, where a divide-width utility has drawn separators.
Quick reference
| Example class | Expected declarations |
|---|---|
divide-accent/75 | border-top-color: color-mix(in oklab, var(--zw-color-accent) 75%, transparent); border-right-color: color-mix(in oklab, var(--zw-color-accent) 75%, transparent); border-bottom-color: color-mix(in oklab, var(--zw-color-accent) 75%, transparent); border-left-color: color-mix(in oklab, var(--zw-color-accent) 75%, transparent); |
Example setup
The shared preview base explicitly sets spec 1, reset: "none", strict mode, tokens.spacingUnit: "0.25rem", and no breakpoints. Each named value is configured in that example; there is no inherited palette or theme. wind-demo classes are authored context styles; their CSS is shown separately from the utility declarations.
Examples in use
Color separators between visible rows
divide-accent/75 configures the separator color and divide-y-2 supplies the top borders. The hidden row is omitted by the selector.
<ul class="wind-demo-divider-list divide-y-2 divide-accent/75"><li class="wind-demo-divider-item">First visible row</li><li class="wind-demo-divider-item" hidden>Hidden source row</li><li class="wind-demo-divider-item">Next visible row</li><li class="wind-demo-divider-item">Last visible row</li></ul>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-color-accent: #075985;
--zw-color-alert: #8b1e3f;
--zw-color-focus: #0f766e;
--zw-color-ink: #16324f;
--zw-color-panel: #edf4f8;
--zw-color-white: #fff;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-divider-list {
max-width: 28rem;
margin: 0;
padding: 0;
list-style: none;
color: #16324f;
font: 14px / 1.5 system-ui, sans-serif;
}
.wind-demo-divider-item {
padding: .75rem .2rem;
}
.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
border-top-width: 2px;
border-top-style: solid;
}
.divide-accent\/75 > :not([hidden]) ~ :not([hidden]) {
border-top-color: color-mix(in oklab, var(--zw-color-accent) 75%, transparent);
border-right-color: color-mix(in oklab, var(--zw-color-accent) 75%, transparent);
border-bottom-color: color-mix(in oklab, var(--zw-color-accent) 75%, transparent);
border-left-color: color-mix(in oklab, var(--zw-color-accent) 75%, transparent);
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"colors": {
"ink": "#16324f",
"accent": "#075985",
"focus": "#0f766e",
"alert": "#8b1e3f",
"panel": "#edf4f8",
"white": "#ffffff"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-divider-item": true,
"wind-demo-divider-list": true
},
"safelist": {
"docs-preview": [
"divide-accent/75",
"divide-y-2"
]
}
}
}Authored demonstration CSS
.wind-demo-divider-list { max-width: 28rem; margin: 0; padding: 0; list-style: none; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-divider-item { padding: 0.75rem 0.2rem; }Custom and named values
Names resolve only through tokens.colors; divide-current and divide-transparent are also supported, as are validated bracket colors. A slash accepts an integer from 0 through 100 and mixes the color with transparent in Oklab. The divide color rule sets all four border-color longhands on matching later siblings; pair it with divide-x or divide-y for line width and direction. Hidden-attribute children are skipped, so the next visible child is still separated from the previous visible child. This is a child-selector utility, not a color applied to the container.
Related guides: Utility grammar · Variants
Catalog details
divide
| Field | Value |
|---|---|
| Catalog identifier | v1.divide.color |
| Class pattern | divide-<suffix> |
| Grammar | {"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-color","allowsFractionSlash":false,"allowsColorOpacity":true} |
| Accepted values | 2 |
| Token categories | colors |
| Negative-value policy | forbidden |
| Conflict group and rank | divide-color (29) |
| Order rank | 0 |
| Selector shape | laterVisibleSiblings |
| Spec version | 1 |
| Emitter properties | border-top-color, border-right-color, border-bottom-color, border-left-color |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
keyword | "transparent" | "transparent" |
keyword | "current" | "currentColor" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
border-top-color | resolved | null |
border-right-color | resolved | null |
border-bottom-color | resolved | null |
border-left-color | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
divide-[red]/40 | border-top-color: color-mix(in oklab, red 40%, transparent); border-right-color: color-mix(in oklab, red 40%, transparent); border-bottom-color: color-mix(in oklab, red 40%, transparent); border-left-color: color-mix(in oklab, red 40%, transparent) |