Remember how sometimes you discover simple things you’ve never noticed, even if they were always there? That’s how I felt when I read this article by Temani Afif: a mixture of astonishment, wonder, and a touch of frustration that I hadn’t looked at before.
About 98.5% of browsers, including Internet Explorer, support the border-image feature. It is a so-called baseline feature: one of the features supported by almost all browsers, yet I had never heard of it before. What it does is almost self-explanatory: it draws an image around a given element, replacing its border.
How it works
It works by defining five different properties, which can be grouped into a one-line shorthand like this
border-image: <source> <slice>/<width>/<outset> <repeat>The border-image-source property defines the source image to render the border via image sources or gradients.
Instead, the border-image-slice property divides the previously defined image into regions that form the components of a border image. Specifically, the slicing process creates nine regions: four corners, four edges, and a middle region. Regions 1 to 4 are those used once to create the corners. Zones 5 to 8 are for the edges, which are repeated, scaled, or modified to fit the size of the element to which the edge is applied. Finally, zone 9 is the center zone, which is discarded by default but can be used as a background image if the fill keyword is set. It is specified using between one and four values to represent the position of each slice. You can use offsets in pixels, percentages, or the fill keyword. See the MDM web docs for more details.
The nine regions defined by the border-image or border-image-slice properties
Regions created in this way are then used according to the directives of the other three properties:
-
border-image-repeatdefine how the border and center regions are adjusted to fit the dimension of the element. -
border-image-widthdefine the width of the border image. -
border-image-outsetdefine the distance between the border image and the element’s box border.
How can it be used?
All this can be useful to create many effects, but the gradient overlay is perhaps one of the most interesting.
Adding an overlay to images is a usual development pattern to improve the readability of text by increasing the contrast between the text and the background. There are many ways to do this, including using multiple backgrounds or adding absolute elements and pseudo-elements.
The border-image property allows you to create an overlay with a very effective one-line text:
border-image: fill 0 linear-gradient(#0003, #000);In this case, we have a source (the gradient) and a slice (fill 0). The slice value makes the gradient fill the whole area of the element. The same effect is achieved by setting slice and width to 50%: in this case, the corners each take up a quarter of the element, and the edges and the middle area are reduced to 0.
border-image: linear-gradient(#0003, #000) 50%/50%;This trick can be used either with background properties or directly on image tags.
Another very effective use is for full-width backgrounds. It is often the case that an element must have a fixed max-width, but the background must instead extend to the ends of the screen. The most common approach is to wrap the element into a parent container element, to which the background is applied.
The border-image property can achieve the same result by avoiding wrapping with unnecessary parent elements.
border-image: conic-gradient(black 0 0) fill 0//0 100vw;The conic gradient allows you to create a solid color with the shortest syntax (the border-image property only supports gradients, not colors). But you can use other types of gradient to achieve the same result.
The slice is equal to 0, and there is no width (so it is equal to 0), while the outset is equal to 0 100vw, which allows the border image to extend to the sides of the entire viewport’s width. Since border-image does not trigger scrolling, using large values is not a problem (technically, you could use smaller values since the outer area to be covered is smaller than the viewport).
Temani Afif then shows many other use cases, but I refer you to his article for all the details.
In summary, there are often features that allow you to do everything you are used to doing with more or less clean hacks. You only need to know how to find them!