CSS3: border-image

Tweet

With CSS3 we can use images as border of an element. Apart from using the normal border styles already available in CSS, we can now make our web pages more colourful and attractive (if you really like colours and shapes!).
Just to go directly to the core, we can use the following style for, let's say, all divs in a document:

div
{
-webkit-border-image:url(myborder.png) 30 30 round;
-o-border-image:url(myborder.png) 30 30 round;
border-image:url(myborder.png) 30 30 round;
}

The border-image property is in fact a shorthand property. As you can see from the above example, we are using different values which are:
1) border-image-source which is the path to our image;
2) border-image-slice which is the inward offsets of the image;
3) border-image-width which is the widths of the image;
4) border-image-outset which defines the portion of the image that goes beyond the box;
5) border-image-repeat which sets the way the image will be repeated.

Before exploring further the above, we should consider that all the values, if omitted, are set to the default values. Apart from the first (the source) which can't be obviously omitted, the default values are - in order: 100%, 1, 0, stretch.

The border-image-source property has a simple syntax:

border-image-source:url(pathToTheBorderImage.png);

If the image is not found, or it is set to none (which is absurd in any case), the border-style property is used. That means we can use the border-style as fallback for not supporting browsers (see below).

The border-image-slice property has values as a percentage, number or "fill". Percentages, relative to the image itself, represents the width for horizontal offsets and the height for vertical offsets. When using numbers we are referring to pixels in a raster image and vector coordinates in a vector image. "Fill" preserves the middle part of the image.
I know it seems quite complicated and I believe it is. We should consider some sort of grid, dividing the image in 9 regions: the 4 corners, the 4 edges and the middle. The middle part is treated as transparent (unless we use "fill"). We are setting values for the other 8 parts of the image. Values follow the rule that if they are omitted they are the same as the previous value.

The border-image-width works the same way as the border-image-slice property. The only difference is in the "fill" value which is "auto" in this case.

Just a note at this point: please follow me to the end of the post and consider the information I'm giving as just... well. information.

The border-image-outset property determines - as said - the number by which the image extends beyond the border box. That is on each side (top, right, bottom and left).

Finally, the border-image-repeat can be set to "stretch" (the image fills the area), "repeat" (the image is tiled) and "round" (the image is tiled but if it doesn't fill the area, the image is rescaled).

As you can there's plenty of possible values to be set, which gives us a lot of freedom but here comes the bad news: compatibility!

The 5 different properties listed above are not really working on any browser to my understanding. The only way to use border-image is to use the shorthand property as described in the first example.

But, my friend, there's still a quick solution. If you really want to use border-image you can always rely on a border-image generator like this one.

And in the future when we will have full support, we might need to fully understand how to properly use all the available properties to create interesting borders.

Please share your experience on the matter by using the comments section below!