CSS Using Image as Border (Border Images)

CSS Border Images

With the CSS border-image property, you can set an image to be used as the border around an element.

CSS border-image Property

The CSS border-image property allows you to specify an image to be used instead of the normal border around an element.

The property has three parts:

1. The image to use as the border
2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched

We will use the following image (called "blue_border.jpg"):

The border-image property takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify.

Note: For border-image to work, the element also needs the border property set!

Here, the middle sections of the image are repeated to create the border:

An image as a border!

Here is the code:

Example

#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(blue_border.png) 30 round;
}

Here, the middle sections of the image are stretched to create the border:

An image as a border!

Here is the code:

Example

#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(blue_border.png) 30 stretch;
}

Tip: The border-image property is actually a shorthand property for the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties in the specified order.

CSS border-image - Different Slice Values

The border-image-slice CSS property divides the image specified by border-image-source into regions. These regions form the components of an element's border image.

The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.

The above diagram illustrates the location of each region.

• Zones 1-4 are corner regions. Each one is used a single time to form the corners of the final border image.
• Zones 5-8 are edge regions. These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.
• Zone 9 is the middle region. It is discarded by default, but is used like a background image if the keyword fill is set.

The border-image-repeat, border-image-width, and border-image-outset properties determine how these regions are used to form the final border image.

Syntax

/* All sides */
border-image-slice: 30%;

/* vertical | horizontal */
border-image-slice: 10% 30%;

/* top | horizontal | bottom */
border-image-slice: 30 30% 45;

/* top | right | bottom | left */
border-image-slice: 7 12 14 5;

/* Using the `fill` keyword */
border-image-slice: 10% fill 7 12;

The border-image-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice. Negative values are invalid; values greater than their corresponding dimension are clamped to 100%.

• When one position is specified, it creates all four slices at the same distance from their respective sides.
• When two positions are specified, the first value creates slices measured from the top and bottom, the second creates slices measured from the left and right.
• When three positions are specified, the first value creates a slice measured from the top, the second creates slices measured from the left and right, the third creates a slice measured from the bottom.
• When four positions are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise).

The optional fill value, if used, can be placed anywhere in the declaration. It fills out the middle of border-image source as a background image for the element.

Example Border Used

The following example shows a simple <div> with a border image set on it. The source image for the borders is as follows:

The diamonds are 30px across, therefore setting 30 pixels as the value for both border-width and border-image-slice will get you complete and fairly crisp diamonds in your border:

border-width: 30px;
border-image-slice: 30;

Different slice values completely changes the look of the border:

Example 1:

border-image: url(blue_border.png) 50 round;

Example 2:

border-image: url(blue_border.png) 20% round;

Example 3:

border-image: url(blue_border.png) 30% round;

Here is the code:

Example

#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(blue_border.png) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(blue_border.png) 20% round;
}

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(blue_border.png) 30% round;
}

CSS Border Image Properties

Property	Description
border-image	A shorthand property for setting all the border-image-* properties
border-image-source	Specifies the path to the image to be used as a border
border-image-slice	Specifies how to slice the border image
border-image-width	Specifies the widths of the border image
border-image-outset	Specifies the amount by which the border image area extends beyond the border box
border-image-repeat	Specifies whether the border image should be repeated, rounded or stretched