Frame Image: border-image-source

We’ve finally made it to the vast and interesting topic of how to combine frames and background images.

The border-image property family is used to set the background image for the block frame. Modern browsers offer really good support for this property family.

The border-image-source property is used to set the path to the frame image. By default, the image will only fill the corners of the frame. In the following assignments, we will look at how you can control how the frame is displayed.

We will use this image as the image for the frame:

The property syntax is the same as what is used for background-image, namely:

border-image-source: url("image.jpg");

Let’s assign a background image for the frame and start customizing it.