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 value1
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valuefour values, each a percentage, number, 'auto' keyword, or <length> made absolute
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript
Formal syntax: [ <length> | <percentage> | <number> | auto ]{1,4}

border-image-width: <number>;
border-image-width: <length>; 
border-image-width: <percentage>; 
border-image-width: auto;
  • <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.
/* One-value syntax */
   border-image-width: 2px;

/* Two-value syntax */
   border-image-width: 5% 15%;

/* Three-value syntax */
   border-image-width: 1.1em 1.5em 2em;

/* Four-value syntax */
   border-image-width: auto 5% 2% 1.2em; 

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.