For years, we've had the ability to create a border using border-image - where an image gets sliced up into nine pieces and reassembled to separately construct the corners and sides of a box.
Now with background-clip: border-area, we can instead apply a background image to a border. It can simply fill the whole border in one piece.
By applying background-size: cover we tell the browser to resize the image so it fills the whole box, while maintaining its natural aspect ratio.
We also must remember to apply background-origin: border-box to make the background image extend fully to the outer edge of the border, instead of only extending to the edges of the padding box and repeating.
Collection
[
|
...
]