CSS border-image-width Property

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

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

<div>Example of the border-image-width property</div>
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;
}

Browser Support

The following table will show you the current browser support for the CSS border-image-width property.

Desktop
Edge Chrome Firefox Opera Safari
121513156
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
181414614.4

Last updated by CSSPortal on: 1st January 2024