CSS border-image-width Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-image-width property specifies offsets that are used to divide the border image area into nine parts. They represent inward distances from the top, right, bottom, and left sides of the area, respectively. If the left width 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.

Initial value: 1
Applies to: All elements
Inherited: No
Computed value: four values, each a percentage, number, 'auto' keyword, or <length> made absolute
Animatable: No
JavaScript syntax: object.style.borderImageWidth

Interactive Demo

border-image-width: 30px;

border-image-width: 15px 40px;

border-image-width: 2.6rem;

border-image-width: 20% 8%;

Example of the border-image-outset property.

Syntax

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

Values

<number>Numbers represent multiples of the corresponding computed border-width.
<length>
<percentage>Percentages refer to the size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets.
autoIf 'auto' is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead.

Example

HTML

<div>Example of the border-image-width property</div>

CSS

div {
   border: 1em solid blue;
   border-image-source: url("images/border.png");
   border-image-repeat: round;
   border-image-width: 27px;
   border-image-slice: 27;
   border-image-outset: 20px;
   height: 70px;
   padding: 20px;
   margin: 20px;
   width: 200px;
}

Result

Editor