Sometimes we want to apply a pattern or image not as a background, but as a border.
The easiest way is to use two HTML elements: one using a background with our stone art image, and one with a white background covering it for our content area.
The main idea is to use a second background of pure white, covering the stone art image. However, to make the second image show through the border area, we should apply different values of background-clip to them. One last thing is that we can only have a background color on the last layer, so we need to fake the white via a CSS gradient from white to white.
You can easily change the width of the stripes via the background-size and the thickness of the border via the border declaration. Unlike our stone art border example, this effect is doable with border-image too.
Marching ants borders are dashed borders that seem to scroll like marching ants. We will convert the stripes to just black and white, reduce the width of the border to 1px (notice how the stripes now turn to a dashed border?), and change the background-size to something appropriate. Then, we animate the background-position to 100% to make it scroll.
However, border-image can also be quite powerful, and even more when used with gradients. For example, assume we want a clipped top border, like the one commonly used in footnotes. All it takes is border-image and a vertical gradient, with the clipping length hardcoded. The border width is controlled by …border-width.