To use an image file for an element border, apply the following CSS border-image style:

border-image: url(url) slice repeat fill;

where url is the source of the graphic image, slice is the width or height of the slices, repeat indicates the side slices should be stretched or tiled to fill the border, and fill is an optional attribute that indicates whether to fill in the background with the image fill interior.

Use the web form below to generate the CSS code for applying a border image to the preview box. The image file is shown on the left; the border image is shown on the right.

Show Grid
top-slice 0px 200px
right-slice 0px 200px
bottom-slice 0px 200px
left-slice 0px 200px
image-fill
horiz repeat stretch repeat round space
vert repeat stretch repeat round space

Carey, P. New Perspectives on HTML5 and CSS3, 8th Edition, Cengage Learning: Boston, 2019.