Border images in CSS: A key focus area for Interop 2023

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
Interop 2023 is a cross-browser effort to improve the interoperability of the web — to reach a state where each technology works exactly the same in every browser. (Source: Interop 2023)
In Interop 2023, CSS border images were identified as a key focus area. This feature, which lets you use images for styling an element's border, has been supported in browsers for many years. However, behavioral differences across browsers (as highlighted in this web-platform issue) have led to some reluctance among web developers to fully use this feature. With the inclusion of border images in Interop 2023, there is a renewed commitment for resolving the behavioral differences and encouraging widespread adoption. This initiative highlights the importance of being able to create visually appealing web designs that are consistent across different browsers.
Each aspect of the border image can be controlled using a specific border-image CSS property, all of which are extensively explained on MDN's reference pages. In this post, we'll provide a recap of all the longhand properties associated with border images and explore how to customize images in borders.
Border images in CSS allow you to use custom images as borders around elements on your website, replacing the standard borders. How cool is that! This gives you a unique and powerful way to style and add your personal creative touch to your website. For instance, imagine you're running an online florist store. You could use a floral or a nature image as the border for various elements on your website to add a charming and uniform theme throughout.
Here's a summary of all the steps involved in successfully using an image as an element's border. The very first step involves specifying the source of the image you like. Following this, you slice the image to specify the parts to be used in the border. Next, you adjust the width (that is, the thickness) of the image, which will control how the image scales within the border area. You have the option to define an outset if you want the image to extend beyond the element's border. Finally, you decide how the image fits or repeats around the border. This will define whether the image repeats, stretches, or adjusts to fit the border area. By following these steps, you can effectively use a custom image as an element border in your web design.
We'll use the following nature-themed image (courtesy of pixabay) to demonstrate how to use it as a border image.
Also, for reference, the following box represents the element where we want to add that border image. The thick green border area is what we will replace with our image. The light yellow background color represents the content and padding boxes.
You specify the source of the border image by using the border-image-source property. Similar to background-image, this property accepts either a URL to an image file or a gradient and applies it to the border of the box. You can use various image formats like PNG, JPG, or SVG.
You'll notice at this stage that the image appears only in the corners of the box. Not what we were expecting, huh? This is just the first step and still a few steps away from customizing the look of the image in the border. The image needs to be further processed using other border-image property values to render the final border appearance — at this point, we're missing instructions on how to slice or distribute the image across the border.
You will notice in the code above that along with the border image, both border-width and border-style have been defined using the border shortcut property. This is because the border-image property will be visible only if the element has a defined border. The border-width property sets the available space for the border image, and the border-style property ensures that the border image is displayed correctly. Without border-width and border-style, the border image will not display, regardless of the border-image properties you set.
Slicing helps us define the parts of the image that will be displayed in the corners and sides of the element's border. It's like cutting a cake into slices, where each piece has its place.
You can slice the image by using the border-image-slice property. This property slices the image using four imaginary lines that are at the specified slice distances from the respective edges. The four slice lines effectively divide the image into nine regions: four corners, four edges, and the middle. These lines determine the size of the regions of the image that will be used for the border.
As an example, with the slice value of 30 for all the sides, the sliced regions would look as shown in the right image below:
With this value 30, the sliced region shown above does not capture enough portion from the image, at least not the parts we would really like to show in the border. Most of the leaves and flowers are getting truncated. In the code below, let's use a higher value, say 70, for slicing the image and see how that looks.
This is looking much better with more desirable regions of the image showing in the border. As you can make out, the result of this step will depend on the image you use. So definitely explore different settings for slicing. Note that it is the green border area we showed earlier that's getting replaced with our custom image.
There is another option you can specify with the border-image-slice value. By default, the slicing action discards the middle part of the image. If you want to preserve it though, you can add fill to the value, as in, border-image-slice: 70 fill;. This will draw the border image over the background in the middle region as well.
In the next step, let's decide on the thickness of the border image. This will determine how the border image scales within the border area. We set the width of the border im