border-image-width property

Specifies the width/height of the border image by defining inward offsets from the edges of the border image area.

CSS Backgrounds and Borders Module Level 3, Section 6

Syntax

border-image-width: [ <length> | <percentage> | <number> | auto ] {1,4}

Property values

length: Distance in absolute or relative units of inward offset.
percentage: Relative to the size of the image area: the width of the area for horizontal offsets, the height of the area for vertical offsets.
number: Represents a multiple of the computed value of border-width, or the width of the border box.
auto: Specifies that the border image width is the intrinsic width, or height, of the corresponding image slice.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value	1

Standards information

CSS Backgrounds and Borders Module Level 3, Section 6

Remarks

By default, the nine parts of the border image are scaled to fit within the nine corresponding regions of the element's border, as specified by border-width. When four values of border-image-width are specified, they set the offsets on the top, right, bottom, and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.

Negative values are not allowed for border-image-width.

If the offsets of two opposite border-image-width are large enough that they will overlap, the border-image-width values are proportionally reduced so there is no overlap.

Examples

border-image-width has a default value of one. This means the border-image-width is one multiple of the computed value of border-width, or the width of the border box. In these examples, the three elements use the same values for border-image-source and border-image-slice.

The example below shows a div element with a default border-image-width of 1 giving its border image a 15px width, (1 x the border-width value of 15px).

An HTML element with border-image-width set to 1.

CSS


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 30;
}

This example sets border-image-width to 10, 20, 30, and 40 pixels. When a pixel value is used, it specifies how many pixels from the edges of the border image area to draw the border image.

An HTML element with pixel values set for border-image-width.

CSS


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 30;
   border-image-width: 10px 20px 30px 40px;
}

Instead of specifying pixel values, border-image-width can be specified as a percentage of the border image area. The following example shows an HTML element with border-image-width set to 25%.

An HTML element using percentage values for border-image-width.

CSS


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 30;
   border-image-width: 25%;
}