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

@LeaVerou Your proposal seems much more complex to me than the current solution via `stripes()`.

To compare it with your example, here's how it looks using the current syntax:

```css
border: 2px stripes(white, black);
```

Furthermore, your proposal seems to be similar to the [resolution from the Tokyo F2F 2017](https://lists.w3.org/Archives/Public/www-style/2017May/0049.html) with the differences of `border` being listified and a new `border-width-relative` being introduced. And those two changes increase the complexity.

Also, it's not totally clear from your proposal how all the `border-*` longhands are affected by this.

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

Side note: `medium` is [defined to be `3px` wide](https://drafts.csswg.org/css-borders-4/#border-width:~:text=The%20thin%2C%20medium%2C%20and%20thick%20keywords%20are%20equivalent%20to%201px%2C%203px%2C%20and%205px%2C%20respectively).

@jsnkuhn:

> yes, I've seen that and am not a fan. This proposed syntax takes into account the existence of those other `border-styles`. They don't get used as often but they still exist and so can not be ignored.

As currently defined, `border-style` still _does_ affect the rendering when using `stripes()`, see https://drafts.csswg.org/css-borders-4/#border-color:~:text=The%20same%20border%20colors%20with%20border%2Dstyle%3A%20dotted.

What you currently can't have with the current solution is different border styles. Though as noted by @LeaVerou in #2532, there aren't many use cases for that. And _if_ there were, we could still introduce a solution that listifies `border-color` and `border-style`.

> My understanding from the original proposal for stripe() was that it was intended to fix aliasing issues with existing solid stopped gradients.

Which "original proposal" are you referring to? As [noted](https://github.com/w3c/csswg-drafts/issues/13044#issuecomment-3473137511) by @Loirooriol, `stripes()` was initially introduced to solve the use case of multiple borders.

@Crissov:

> ((As part of a larger work-in-progress proposal, I recently pondered how to use [stripes](https://drafts.csswg.org/css-images-4/#stripes) as (non-fading) gradient lines, and perhaps vice versa. This feels missing from 1D and 2D images, although the background properties can already achieve some of it.))

For "solid stopped gradients" we resolved on adding `*-stripes()` functions in https://github.com/w3c/csswg-drafts/issues/7244#issuecomment-1699543528.

-----

The only thing that still feels a bit strange to me is that we defined `<image-1D>` for `border-color` and `outline-color`, while it actually defines an _image_. See #9735 for a discussion around that.

But in general, I still believe `stripes()` is a straightforward solution for defining multiple borders.

Sebastian

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


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

Received on Sunday, 2 November 2025 00:15:06 UTC