Re: [csswg-drafts] [css-borders-4] Allow to define separate border images for different border regions (#9183)

It was my personal experience that `border-image-slice` was the hardest property to get use to when I first started working with `border-image`. Have observed many others struggling with it as well. Even when I show people the MDN `border-image` generator they just tinker with it constantly clearly not understanding what is going on. Also cannot count the number of times people have "corrected" me when I tell them that the pixel value cannot have a `px` unit. They tell me: "That's just not how CSS works".

1. Under "Allow to target specific regions" you mention "all eight regions." This seems to ignore the possibility of including a `fill` image. Is that intentional? 

2. Maybe a `grid-template` like syntax could be used when specifying all images?

```css
border-image-source:
"url(top-left-corner.svg)    url(just_a_solid_line.svg)                         url(top-right-corner.svg)"
".                           .                                                  ."
"url(bottom-left-corner.svg) linear-gradinet(to top, #000 0 3px, transparent 0) url(bottom-right-corner.svg)";
```

3. How would alignment of images work if for example the top corner images and top edge image where not the same height? Outer, center/middle, or inner aligned?

4. I can see a lot of `just_a_solid_line.svg`/solid gradient being used to mimic solid bordered edges as part of the source. Could it be made possible to use something like `border solid 3px` as an image?? Or as a keyword in place of an image??

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


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

Received on Sunday, 13 August 2023 13:09:20 UTC