[css-borders-4]: `border-shape` order of shapes in the two-shape variant

[noamr]

Currently the spec for border-shape: <<basic-shape>> <<basic-shape>> defines that the first shape is the outer one and the second shape is the inner one. I don't know if this was 100% thought out.

Having the borders go outwards is inconsistent with stripes where the borders go outwards.
Does this consistency matter?
To me it felt more intuitive to go inwards but I can't entirely reason about it.

Opinions?
@SebastianZ @danielsakhapov @tabatkins @LeaVerou @fantasai

[LeaVerou]

No opinion, but whatever we go with should be consistent with the order we pick for multiple border colors.

[noamr]

I think we have a few options:

1. Leave as is (outside->in, similar to fill rules)
2. Change to inside-out, similar to radial gradients
3. Separate to two properties (inner-border-shape and outer-border-shape), though that can become a bit messy in defining how that differentiates from the single shape variant
4. Use keywords instead of ordering, this can be nice but also perhaps more verbose than necessary:

.target {
  border-shape: 
     circle() outside, rect() inside
}

I currently tend towards leaving it as is but open to other stronger opinions.

[SebastianZ]

My gut feeling says it should be inside-out, but I don't have a strong opinion on this. Though I agree with @LeaVerou that it should be consistent with multiple border colors.

Sebastian

[noamr]

Actually one argument in terms of "big before small" is that it's a similar mental model to multiple backgrounds - it feels more like "back to front" while contents first feel like "front to back".

I wonder if anyone has a strong opinion otherwise.

[SebastianZ]

I can't really follow that argument. "big before small" seems unrelated to "back to front" to me. A better analogy in my mental model is adding layers of clothing, first the inner ones, then the other ones.

Sebastian

[noamr]

I can't really follow that argument. "big before small" seems unrelated to "back to front" to me.

If backgrounds have a different sizes and are not transparent the bigger ones have to come first.
Also in layouts the outer elements (eg table) come before the inner ones (eg ttd)

Radial gradients are actually one of the only places where inner comes before outer I think.

[jsnkuhn]

1. I'm on team outside-inside. It feels right to me that the first shape determines the over all shape of the element and the second optional shape is for the border.

2. If i'm being honest still to this day I can never remember what order the radial gradient syntax goes in. I write it out and fix it if I have to after it paints. So to me basing this on radial gradient order isn't useful.

3. Even if you would have inner and outer long hands wouldn't there still be a shorthand with this issue?

4. Agree that keywords would be too verbose.

[noamr]

Looking at #13044, seems like tides are going towards inside->out, but I believe that polling border-shape would produce opposite results, see https://indieweb.social/@nomster/115994642801093006 and https://x.com/nomsternom/status/2017891964281094371.

Given the ambiguity, perhaps we shouldn't rule out keywords? It can be a single keyword, some variation of this:

border-shape: circle() enclosing square();
border-shape: circle() clipping square();
border-shape: circle() enclosed-by square();
border-shape: circle() clipped-by square();

Also it might be good if the single-shape variant is clearly a stroke:

border-shape: stroke circle();

[Crissov]

Like already mentioned elsewhere, CSS already has keywords for compositing operators (which are almost what this is).

<compositing-operator> = add | subtract | intersect | exclude

PS: If brevity is important, in would work if the order was flipped.

[noamr]

Like already mentioned elsewhere, CSS already has keywords for compositing operators (which are almost what this is).

= add | subtract | intersect | exclude
PS: If brevity is important, in would work if the order was flipped.

These are not exactly compositing, as the two shapes have special meanings - the outer one, for example, participates in shape-outside, and the inner one is used for overflow clipping.

However, I do like exclude.
How about excluding?

border-shape: circle() excluding rect();
border-shape: exclude rect() from circle();
/* or a single shape */
border-shape: stroke circle();

[jsnkuhn]

1. still not a fan of the whole keyword thing generally speaking but what about using a more gradient like keyword: to inside or to outside. With one being the default so no reason to include unless you want it reversed?

2. the title specifically calls out "two-shape variant". Has a more than 2 shape option been considered for creating multiple borders?