Re: [csswg-drafts] [css-borders] allow multiple borders (#13044)

> Further, as noted, understanding a comma-separated `border-color` that also sets different colors per side is, imo, near impossible. Two dimensions of optimal repetition is very difficult to mentally parse! Imagine manually doing `groove`, for example; it would require `gray black black gray, black gray gray black`, compared to `stripes(gray, black) stripes(black, gray) stripes(black, gray) stripes(gray, black)`, which is longer but has each side nicely grouped so it's trivial to understand what's happening on each side.

To be fair, a comma-separated syntax for `border-color` could also distinguish the sides by comma. I.e. it could be `gray black, black gray, black gray, gray black`.

@LeaVerou Would have been great to see whether the results of the poll would have been different if you posted the `stripes()` function first.

> It may even turn out to be easier than the current `stripes()`-based solution that requires them to implement dots and dashes painted with multiple colors, which no-one needs, ever.
> 
> This is [a real example from the spec](https://drafts.csswg.org/css-borders/#border-color)!
>
> <img alt="Image" width="450" height="270" src="https://private-user-images.githubusercontent.com/175836/508758267-56a65967-2cd6-4589-a342-5324b851664b.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjIyMTQzNzgsIm5iZiI6MTc2MjIxNDA3OCwicGF0aCI6Ii8xNzU4MzYvNTA4NzU4MjY3LTU2YTY1OTY3LTJjZDYtNDU4OS1hMzQyLTUzMjRiODUxNjY0Yi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUxMTAzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MTEwM1QyMzU0MzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jNDU1NWMxODc4ZmIwNzk3MzUyZTZmMzg5ODI5OGY0Y2JkMmZjYzA2OGY0Y2M1NTgxNDhhOTI5YjhkOWEwZmRkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.i7EhQ1b_YHXJE5pcDuxgFqDp3i0Vvgqu54KbPSmRyRw">

That only reflects what implementations do today with single-color values.

Btw. regarding the new proposal, I am mostly struggling with the `border-width-relative` property. We could allow to define the width of each stripe directly together with each color. So e.g. we'd have

```css
border-color: red 1px, yellow 1fr, blue 2px;
border-style: solid;
border-width: 10px;
```

The issue with that, though, is that then you get ambiguities regarding the lengths when using the `border` shorthand. And at that point we're back with the `stripes()` function or possibly some odd syntax restrictions.

-----

@astearns I won't be able to participate in the TPAC F2F. Though I don't want to hold up any discussion or possible resolutions. So maybe someone can represent my points there.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13044#issuecomment-3483211064 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 4 November 2025 00:37:41 UTC