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

I do agree that at first listifying seems like a better solution, but if you dig a little deeper, it causes a bunch of weird side effects. See https://github.com/w3c/csswg-drafts/issues/2532 for a discussion.

That said, I don't much like `stripes()` (even though I proposed it 😂). I think it's a very weird and overcomplex solution to the rather simple use cases it's trying to solve. It would be _much_ better if we could come up with a solution that is geared around listification of border properties.

The main problem is that we want this:

```css
border-width: 10px;
border-color: red, black, white;
```

…to specify a 10px border, not a 30px border.
But on the other hand, this:

```css
border: 10px solid red, 10px solid black, 10px solid white;
```

…should totally specify a 30px border!

There is also the issue that listification combines very oddly with the multi-side syntax:

```css
border-color: skyblue orange yellowgreen indianred, black yellow
```

![image](https://user-images.githubusercontent.com/175836/38607092-1198f110-3d78-11e8-9982-ad39e0faf6d4.png)

This is a completely nonsensical way to specify border colors. People think of all colors for a side as a group, they don't group colors by whether they are innermost or outermost.
Though different colors for each side are pretty rare, so I’m not sure this is a concern we should design the syntax around, and definitely not just cause for complicating the simple case.

Just as a strawman, what about:

- `border-color` is listified
- `border-style` may or may not be listified. Perhaps not listified in v1? We could even declare that more than 1 border makes all non-`none` border styles compute to `solid` if it would help implementors, since I've never seen a use case for anything else.
- `border-width` is **not** listified and specifies the **total width**
- `border-width-relative: [<flex> | <length>]#` (name TBB) which specifies relative proportions in `fr` (initial value: 1fr).
- To compute the actual rendered total border width, we take the sum of all lengths in `border-width-relative` and then use that OR `border-width`, whichever is larger. 
- `border` *is* listified but lengths specify `border-width-relative` directly *and* `border-width` as the sum of all widths.

Note that `border-width` is intentionally _not_ a shorthand that includes `border-width-relative`: we want setting `border-width: 1px` to work as expected, and set the border to a `1px` border, not a _number of colors_ &times; `1px` border.

Some more examples:

The driving use case for `stripes()` (a black and a white `1px` borders) would be either of these:

```css
border: 1px solid white, 1px solid black;
```

```css
border: white, black;
border-style: solid;
border-width: 2px;
```

```css
border: white, black;
border-style: solid;
border-width-relative: 1px;
```

Rainbow border:

```css
border-color: red, yellow, lime, aqua, blue, purple, fuchsia;
border-color-relative: 1px;
```

Border that is a generalization of `double`, with a custom color between two `1px` borders:

```css
border: white, red, white;
border-style: solid;
border-width-relative: 1px max(1px, 1fr) 1px;
```

Would produce a border that is of total width `medium` (`border-width` initial value) or `3px` (whichever is larger) that consists of two `1px` white borders, and `1px` or more red, depending on what `medium` resolves to.

----

Clearly this needs work, as it's a strawman I just came up right now, but I think it's a much better direction than `stripes()` (and likely easier to implement?).

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


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

Received on Friday, 31 October 2025 19:28:27 UTC