Understanding border-image

The border-image property is a relatively new property, which allows us to specify images to be used as borders instead of the typical border styles (border-style, border-color).

The border-image property does not affect the box model border area, which is controlled by the border-width property. However, the border-image property is still dependent on the existence of a border area. If border-width is set to 0, the border-image property will not apply.

The border image belongs to its own border image area, which is not the same as the border area, as we will see.

The border image area, unlike the border area, extends aross the whole element, including the other box model areas (border area, padding area, content area).

This allows us to use the border image (despite its name) as a background for the element, but also allows the border image to extend outside the border area.

The border-image property is a shorthand for 5 properties controlling the border image -

  • border-image-source
  • border-image-slice
  • border-image-outset
  • border-image-repeat
  • border-image-width

The shorthand is writing in this order -

border-image: <source> <slice> <width> <outset> <repeat>

border-image-source #

Values Description
url(path/to/image.jpg) The path to the image
none No image

The border-image-sourceproperty defines the path to the image to be used as the border. The image is used instead of any border-style value. The nature in which the image is applied depends on the other four border image properties.

border-image-slice #

Values Description
number A number representing pixels (although the unit should not be written)
percentage Percentage of the height/width of the full size image
fill Image is not sliced

The border-image-slice property defines how the image is sliced to create the border. The values specify how far, going from the outer edges of the image inward, before we slice the image. It does not control the width of the resulting border image, which is controlled by border-image-width, but rather it controls how the image is cropped to fit the border image area.

.foo { border-image-slice: 50; }

Border Image Slice 50

We can alo specify different values for the four sides of the image -

.foo { border-image-slice: 50 100 200 100; }

Different Slice for 4 Sides

By default, if a number or percentage value is given alone, the middle section of the image is removed to create a normal “border” effect. However, if we add the fill keyword, the image is not cut and fills up the background of the element. For example -

.foo {
border-image-slice: 50 fill;
}

Border Image Slice Fill

border-image-outset #

Values Description
number A number representing multiples of the corresponsing border-width
length A pixel value (including px unit)

The border-image-outset property defines how much the border image area extends outside the border area.

A value of 0 means that the border image area does not extend outside the border area at all. A value of 2 means the border image area extends outside the border area by 2 times the border-width. Similar to border-image-slice, we can specify values for each side of the border image.

.foo {
border-width: 50px;
border-image-outset: 0; /* border image area will map on border area exactly */
border-image-outset: 2; /* extends outside by 100px (50px x 2) */
border-image-outset: 0 1 2 3;
}

Border Image Outset

border-image-repeat #

Values Description
stretch The image is stretched to fill the border image width
repeat The image is tiled/repeated to fill the border image width
round The image is tiled. If it does not fill the area with a whole number of tiles, the image is rescaled
space The image is tiled. If it does not fill the area with a whole number of tiles, extra space is redistributed between the tiles

The border-image-repeat property defines how the image should be scaled or tiled if it is not big enough to cover the full border area. Here is how the different values handle the same image -

Border Image Repeat

We can specify a different behaviour for the vertical sides and for the horizontal sides of the border image area.

.foo {
border-image-repeat: stretch repeat; /* horizontal vertical*/
}

border-image-width #

Values Description
number A number representing multiples of the corresponsing border-width
percentage Percentage of the border image area
length A pixel value (including px unit)

The border-image-width property defines the actual width of the border image. Although, by default, the width is the same as the border-width, the width of the border image can actually be more or less. We can specify one value for all four sides, or specify each side’s value.

If we use a number value, this represents multiples of the corresponding border-width. For example -

.foo {
border-width: 50px;
border-image-outset: 3;
border-image-width: 2; /* = 100px */
}

Border Image Width with Length Value

If we specify a percentage value, this is calculated based on the border image area. This is made up of the whole element area plus any outset specified by the border-image-outset.

.foo {
border-width: 50px;
border-image-outset: 3;
border-image-width: 10%;
}

Border Image Width with Percentage Value

Keep in touch KeepinTouch

Subscribe to my Newsletter 📥

Receive quality articles and other exclusive content from myself. You’ll never receive any spam and can always unsubscribe easily.

Elsewhere 🌐