[css-borders] manipulating `border-image-source` before slice

[jsnkuhn]

https://drafts.csswg.org/css-backgrounds/#border-images

The border-image spec is missing the ability to manipulate border-image-source in the same ways we can manipulate background-image and mask-image. Note that this is about manipulating the border-image-source itself before it is sliced.

suggesting adding:

• border-image-source-size
• border-image-source-repeat
• border-image-source-position?
• etc
• comma separated multiple border-image-sources, -repeats, -sizes

use cases:

• Creating this sort of image to use for a corners only border should be doable with conic-gradient but currently isn't.

border-image-source: conic-gradient(#0000 0 270deg, #000 270deg); border-image-source-size: 66.6% 66.6%; border-image-source-repeat: repeat;

• other css pattern borders like checkerboard borders, diamonds etc... Many of which would currently require multiple images

• border-image-source-repeat would allow the use of a single image to be used as stamps around the border. One icon image repeated to create a 3x3 grid of that icon to use as a border-image-source.

border-image-source-size: 33.3% 33.3%; border-image-source-repeat: repeat;

[jsnkuhn]

This one could be 4 radial gradients or copies of the same stroked circle image. It would also require border-image and border-radius to work together #7550 :

[SebastianZ]

• Creating this sort of image to use for a corners only border should be doable with conic-gradient but currently isn't.

It is. https://jsfiddle.net/SebastianZ/9ehjyvob/

Note that this use case was already mentioned by you in https://github.com/w3c/csswg-drafts/issues/6807#issuecomment-1145981728.

And I'd rather prefer a general image manipulation solution than adding that functionality to yet another specific type of image. But yes, use cases like patterns created via image functions should be doable with such an image manipulation functionality.

Sebastian

[jsnkuhn]

huh... so if you don't include a border-image-slice the full border-image-source gets put in each corner but not on the edges. That's a new one for me.

Have to admit in retrospect that I've seen the images at the corners thing but just assumed it was a bug. To be fair this property has always been a bit of a mine field of bugs before the Interop clean up this year.

[SebastianZ]

Have to admit in retrospect that I've seen the images at the corners thing but just assumed it was a bug. To be fair this property has always been a bit of a mine field of bugs before the Interop clean up this year.

I agree that border image slicing is relatively hard to understand. Therefore, I created #9183 suggesting an alternative to slicing.

Sebastian

[SebastianZ]

And I'd rather prefer a general image manipulation solution than adding that functionality to yet another specific type of image.

Thinking more about this, there are cases in which image manipulation may actually not be the right solution. This depends on whether the actual rendering size can be considered within @image for features like repetition, sizing and positioning.

If @image is not context aware, we could solve those use cases differently. Maybe in combination with #9183 we could introduce new border-image-* properties (without source-), so you could manipulate the images of the different regions.

When then combining this with multi-layer support (#8802), borders like in https://github.com/w3c/csswg-drafts/issues/9183#issuecomment-1680606278 could then be created like this:

border-image-source:
  url('corner.svg') url('frame-decor.svg') none,
  linear-gradient(90deg, #bf9875, #604b38, #bf9875) image(#bf9875);
border-image-repeat: no-repeat;

Sebastian