[css-borders-4] corner-shape: angle and partial borders

[fantasai]

Border style changes are currently a bit awkward on curved borders, but it seems like most of the time a gradual change would be ideal...

However for corner-shape: angle it might not be so obvious what the appropriate handling should be... in particular, between having a border and not having a border, it would be awkward to transition suddenly halfway; and there are reasonable use cases for having both a gradual transition to 0-width and for having the entire diagonal be a single width.

It might make sense to define thickness transitions to be gradual, but transitions to/from none be sudden? Then both options are possible.

[jsnkuhn]

What are the "reasonable use cases" for this? I've been pulling angle examples for a year and a half over in the use case thread (#6980) and have yet to run into one example of angle, scoop, or notch that has partial borders.

[fantasai]

Take for example this one: #6980 (comment)
Imagine the bottom two edges had a thick colored stripe.

Similarly, the side arrow shapes or slash shapes (like the squoosh example), with a thick border on the shaped side.

I don't have any collected examples, but these seem like things that authors will want to do.

[jsnkuhn]

I'll point out that both of the example sited here do not include partial borders, they in fact don't include borders at all. I just scrubbed through the whole thread and only found 1 example where partial borders on an angled corner are used and I would say filter: drop-shadow(); could be used for this.

Borders and corner-shape have been discussed on and off in the use case thread and it seems that 2 ideas have emerged here:

1. do the same thing that was done with border-radius by try to make border-top, border-right, border-bottom, border-left work with more shapes that are not rectangles.

As I understand it lots of work went into defining how different border option combinations for border-radius should work so it's fair to think the same would be true of corner-shape. (It's worth nothing that a lot of these options are to this day not consistently supported cross browser.) I think the important question is how many of these different border -style, -width and -color combinations are used in practice? Most cases that I see are solid, consistently sized, and consistently colored. ie, border: solid #000 5px;. Angled/notched/scooped bordered examples from the use case thread seem to back this up.

2. Abandon the "everything starts as a rectangle so it definitely has 4 sides they just need to be defined" idea and go with more of a vector style stroke idea for borders. It seems that this change would need to be a thing with element-shape/clip-shape for sure. Imagine trying to define a border-top of any arbitrarily shaped polygon. The question is does this new ideology start with corner-shape or not.

As mentioned above for the edge cases where individual borders are wanted we do now have filter: drop-shadow(); which wasn't an option when border-radius was being worked on.

[jsnkuhn]

With something like this where the bottom corners are extended up to 100% height of the element the need would be not to have the border painting cut halfway through the corner as currently happens with border-radius. If someone did want only half the corner border painted that's probably where border-clip would be needed.

[jsnkuhn]

In addition, I don't think that generally speaking if someone would declare a border-top-style: dotted and a border-left-style: solid that they would want the dotted border to extend to the center point of the corner. That would just look a bit odd I think? Rather that it be dotted just on the top edge.

I guess the problem at the root is that for the example above the top left corner would be part of both the border-top and border-left.

[jsnkuhn]

An example of a scoop with a partial border not an angle but still seems like it might be useful.

[jsnkuhn]

This styling for Chrome's tab grouping has been staring me in the face for a while I just never noticed that it was a partial border. Again not angle but does fit the bill as a possible partial notch-ed corner shape with border-radius.

[jsnkuhn]

2 some what relevant designs here https://shop.redcandlegames.com/projects/ninesols

This one is part of a more complex design but does have the partial angled corners:

partial notched borders here:

[jsnkuhn]

Looks like in the overwhelming majority of examples I've run across the entire corners are included in the border instead of cutting the corners in half like border-radius does for round.