CSS border-image-width Property

CSS border-image-width

The border-image-width property in CSS specifies the width of the border image area. This property defines how much space the border image takes up in the box model, and it can be set using a number, percentage, or the keyword auto.

Syntax of border-image-width

</>

Copy

border-image-width: number | % | auto | initial | inherit;

Values

Value	Description
`number`	A multiplier of the border-width. For example, `1` means the border image width is equal to the border width.
`%`	Defines the width as a percentage of the border image area.
`auto`	Uses the intrinsic width or height of the border image.
`initial`	Sets the property to its default value (equal to the border width).
`inherit`	Inherits the value from its parent element.

Default Value

1 (equal to the border width)

Examples for border-image-width

Using the CSS border-image-width Property

The following examples demonstrate how to use the border-image-width property to control the width of the border image.

</>

Copy

/* Set the border image width to 10px */
.element {
  border-image-source: url(border.png);
  border-image-slice: 30;
  border-image-width: 10px;
}

/* Set the border image width to 50% of the border image area */
.element {
  border-image-source: url(border.png);
  border-image-slice: 30;
  border-image-width: 50%;
}

/* Use the intrinsic width of the border image */
.element {
  border-image-source: url(border.png);
  border-image-slice: 30;
  border-image-width: auto;
}

/* Inherit the border image width from the parent element */
.element {
  border-image-width: inherit;
}

Example for a Border Image with Custom Width

Below is an example demonstrating how to use border-image-width: 10px to set the border image width:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    border: 20px solid transparent;
    padding: 20px;
    border-image-source: url('https://www.tutorialkart.com/img/border-star.png');
    border-image-repeat: round;
    border-image-slice: 80;
    border-image-width: 10px;
  }
</style>
</head>
<body>

<h2 class="highlight">Lorem Ipsum</h2>

</body>
</html>

Another Example for a Border Image with Custom Width

Below is an example demonstrating how to use border-image-width: 28px to set the border image width:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    border: 20px solid transparent;
    padding: 20px;
    border-image-source: url('https://www.tutorialkart.com/img/border-star.png');
    border-image-repeat: repeat;
    border-image-slice: 83;
    border-image-width: 28px;
  }
</style>
</head>
<body>

<h2 class="highlight">Lorem Ipsum</h2>

</body>
</html>

Browser Support

The border-image-width property is supported in modern browsers. Below is a compatibility table:

Browser	Version
Chrome	15.0
Edge	11.0
Firefox	13.0
Safari	6.0
Opera	15.0

TutorialKart

CSS border-image-width Property