CSS border-image-width

The border-image-width property is used to specify the width of a border image. Its shorthand property is border-image.

CSS

border-image-width: value;

This property specifies the border width so that the border image gets scaled according to it.

See the Pen CSS border-image-width by Aakhya Singh (@aakhya) on CodePen.

Note: By default, a border image takes the width specified by the border-width property. If the border-image-width value is greater than the width of the border specified by the border-width property, then the border image exceeds the border box of the element and may overlap with its content.

Values

<number> : Specifies width of border image as a multiple of the corresponding border-width value. The default value is 1.

<length> : Allows you to define the thickness of the border image. Negative values are not allowed.

<percentage> : Allows you to define the thickness of the border image as a percentage of the width (for right and left offsets) or the height (for top and bottom offsets) of the image. Negative values are not allowed.

auto : Sets the border image width as the intrinsic width and height specified by the border-image-slice property.

initial : Sets the default value.

inherit : Inherits the value from parent element.

Example

Have a look at the effect of different border-image-width values on the width of a border image.

HTML

<div id="div4">border-image-width: 1.5</div>

CSS

div {
  width: 400px;
  padding: 10px;
  border: solid 20px;
  border-image-source: url('/path/image.jpg');  
  border-image-slice: 30%;
  border-image-repeat: round;
}

#div4 {
  border-image-width: 1.5;
}

See the Pen CSS border-image-width by Aakhya Singh (@aakhya) on CodePen.

The other three properties border-image-source, border-image-slice and border-image-repeat are used to set the border image, slice the border image and set the repetition behaviour of the border image respectively.

Note: The border-style property must be defined before the border-image-source property to set a border image.

Giving different values for different border sides

You can give four or less than four values to the border-image-width property. The effect of each of these on border image width is given below.

Giving four values

The first, second, third and fourth values define the top, right, bottom and left width respectively.

CSS

border-image-width: 20px 10px 15% 30px;

For the above declaration

• top width is 20px
• right width is 10px
• bottom width is 15%
• left width is 30px

Giving three values

The first value defines the top width and the third value defines the bottom width. The second value defines the right and left widths.

CSS

border-image-width: 20px 10px 15%;

For the above declaration

• top width is 20px
• right and left widths are 10px
• bottom width is 15%

Giving two values

The first value defines the top and bottom widths. The second value defines the right and left widths.

CSS

border-image-width: 20px 15%;

For the above declaration

• top and bottom widths are 20px
• right and left widths are 15%

Giving one value

It defines all the four widths.

CSS

border-image-width: 20px;

• all the four widths are 20px

Look at the following example.

See the Pen CSS border-image-width by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is not supported in IE 10 and its earlier versions.