In this section, we will learn what the border-image property is and how to use it in CSS.

Click here to run the example of border-image property.

CSS border-image Property Definition and Usage

In CSS we can use images as the border of elements!

This is done with the help of a CSS property named `border-image` by which we can set an image for the border of an element.

CSS border-image Property Syntax

border-image: url(picture-address) slicing/ width/ outset repeat

border-image: url(picture-address) slicing repeat

border-image:url(picture-address) slicing/ width

CSS border-image Property Value

1. url: this is the address of the image we want it to be used as the border-image.
2. Slicing: As you’ll see at the end of this section, slicing is the process of turning an image into 9 blocks, but to turn an image into 9 blocks, we need 4 values (These values are explained at the end of this section) or one value if all four numbers are equally the same.
3. Width: By default, the sliced blocks will scale big enough to fit the width of the border but we can go further and increase the width by assigning a value here which is considered being a new width (this value is separated from slice using ‘/’) also this value is optional.
4. Outset: this value declares the amount by which the border image will extend beyond the border of the container. This value is optional and if used, it should be separated from the Width value using ‘/’.
5. Repeat: CSS should decide how to fill an element’s empty borders with image blocks after filling the four corners. The value for this part can be “repeat”, “round”, “space” and “stretch”. This value is optional and if not set, the default value will be used, which is stretch.

You should know that the `border-image` is actually the shorthand for these properties:

1. border-image-source: declares the address of the image.
2. border-image-slice: declares how to slice the image.
3. border-image-width: set the width of the image.
4. border-image-outset: set the outset of the image.
5. border-image-repeat: declares how the image should be repeated

Example: border-image property in CSS

See the Pen border-image property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS border-image Property Work?

The first thing you should know about `border-image` is the fact that any picture that is going to be used as the border will be divided into 9 blocks! The size of each block is something that we should declare.

Each of these blocks then will be used in the process of setting an image for the border of an element.

For example, let’s say this is the picture we want to use as the border of our element:

Depending on size we set for each block, the size of each block might end up something like these:

• 

• 

• 

Other examples:

• 

• 

• 

• 

• 

• 

• 

• 

Dividing an image is called “image-slicing”

Now first, let’s see how we slice an image:

Well, in order to divide an image into 9 blocks (slicing), CSS needs 4 digital numbers! These numbers should be positive and they can be different from each other like 20 30 22 10 or they can be equally the same like 40 40 40 40 which in that case only 1 number is enough and CSS will use that number four times.

So what’s the job of each of these values?

Let’s say we have an image like this:

The dimension of this picture are 100 pixels horizontally to 100 pixels vertically:

Now back to our question: what’s the job of each of these values?

The first value: is the number of pixels to be counted from top edge of the picture towards bottom side of the picture.

For example, let’s say the first value is 33, which mean count 33 pixels from top edge of the picture vertically towards bottom side of the picture.

The second value: is the number of pixels to be counted from right edge of the picture towards left side of it.

Let’s say the second value is 40, which means horizontally count 40 pixels from right edge of the picture towards left side of it.

The third value: is the number of pixels to be counted from bottom edge of the picture towards top side of it.

Let’s say the third value is 20; that means vertically count 20 pixels from the bottom edge of the picture towards the top side of that picture.

The fourth value: is the number of pixels to be counted from left edge of the picture towards right side of it.

Let’s say the fourth value is 45; that means horizontally count 45 pixels from left edge of the picture towards the right side of it.

As you can see now, the picture is divided into 9 not equal blocks.

We could use percentage value for each of these four numbers as well.

In that case, if the first number for example was 30%, that means 30% from top edge of the picture towards bottom side of it (in the picture above, because the total size of the picture is 100 * 100 pixels, 30% means 30 pixels!). Or if the second value was 45%, it means 45% (which is equal to 45 pixels for the picture above) from the right edge of the picture towards left side of it and so on.

Now that we have divided the picture into 9 blocks, CSS will pick the four corners of this divided picture and use them for the corners of the element that we want to set an image for its border.

Let’s say this is our element:

Here’s the first step that CSS takes:

Note: the width of each corner of the element might be bigger or smaller than the corner of the related image; in that case, CSS will scale the image corner blocks to fit the elements corners.

Remember that corner-images will be scaled or squeezed if necessary, but there’s no increase or decrease in the number of pixels that we set (those four values).

The next step is to use other blocks of the divided picture in order to fill the empty parts of the border.

As the picture below shows:

Basically, CSS uses:

1. Top-middle block of the picture to fill Top-middle border of the element.
2. Right-middle block of the picture to fill Right-middle border of the element.
3. Bottom-middle block of the picture to fill Bottom-middle border of the element.
4. Left-middle block of the picture to fill Left-middle border of the element.

So running these steps for this particular example finally results in:

Note: the center block of the divided picture will be un-used.

In the picture above we’ve repeated the middle blocks of the image in order to fill the empty parts of the border but CSS have other options like `stretch` which makes the middle blocks of the image to stretch and fill the empty part of the borders.