[css-borders-4] Allow to define separate border images for different border regions #9183
Description
The slicing logic for border images is a relatively complicated concept that can confuse authors.
To make it easier to define border images, it should be possible to define multiple images instead of a single one that gets sliced.
The idea is to define up to eight individual images via the border-image-source property. Doing so, the border-image-slice property doesn't have any effect. The other border image properties would still work the same.
When eight images are specified, each image targets one region of the border image area, starting at the top left corner and going clockwise through the regions.
As indicated in the previous sentences, you may also specify less images. This allows to cover common use cases and may save network bandwidth when external images are used.
For filling the different regions I can imagine two different approaches.
Copy and auto-flip and/or auto-rotate the images
If less than eight images are defined, the images are used for the other regions as well.
E.g. if only two images are specified, the first one will be used for the four corner regions. It will be flipped horizontally for the corners on the horizontal opposite side and vertically for the vertical opposite side. The second image is then used for the four edges, rotated by 90° for each adjacent side.
Example:
border-image-source: url('corner.svg') url('edge.svg');If three images are specified, the first one is used for the corners again, the second one for the top and bottom edges, and the third one for the left and the right edge, with the ones for the bottom and right edges rotated by 180°.
Example:
border-image-source: url('corner.svg') url('top-bottom-edge.svg') url('left-right-edge.svg');Other combinations might be possible.
There may be use cases in which an auto-flipping and -rotating algorithm might not be wanted. For those we might introduce a new property that controls how to place the images.
Allow to target specific regions
Authors have to define the images for all eight regions but may skip them. That allows to place the images in specific regions within the border image area.
If authors want to add border images only in the bottom regions, they'd skip the top, left and right regions.
Example:
border-image-source:
none none none /* top regions */
none /* right edge region */
url('bottom-right-corner.svg') url('bottom-edge.svg') url('bottom-left-corner.svg')
none /* left edge region */;If only the four corners should be decorated, authors would have to skip the edges.
Example:
border-image-source:
url('top-left-corner.svg')
none
url('top-right-corner.svg')
none
url('bottom-right-corner.svg')
none
url('bottom-left-corner.svg')
none;Flipping and rotation like in the first proposed solution would still be possible via image manipulation functionalities. This would reduce the need for different images in some cases.
Sebastian