border-image-width property

The border-image-width property controls the width of the visible part of a border and scales it. If this value is greater than the width in border-width, the border image will go under a content.

For more details, see the border-image property.

Syntax

selector {
	border-image-width: CSS units | percentages | number | auto;
}

Values

Value	Description
CSS units	Value in specified CSS units.
Percentages	Percentage values relative to the size of the block to which the border is given.
Number	Numeric value by which `border-width` is multiplied.
`auto`	A keyword. If it is specified, the value is equal to the corresponding `border-image-slice`. If there is no suitable size, the `border-width` value is used, and the image fills the entire corner of the frame, going under the content. See examples for better understanding.

Default value: 1.

Example . Number

Let's set the border-image-width value to 2 when hovering the mouse over the element. In this case, the border will become 26px*2 in size - 2 times larger than its width, specified in border-width. The border will go under the text (like a background):

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Example . Let's change the border-image-repeat value to round

In the previous hover example, the border will not contain an integer number of diamonds. Let's fix this by setting border-image-repeat to the round value:

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: round;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Example . Percentages

Let's set the border-image-width value to 50% when hovering the mouse over the element. In this case, the border will become 50% of the block size (that is, two borders, right and left, will cover the entire block):

<div id="elem"></div>

#elem:hover {
	border-image-width: 50%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Example . Percentages

Let's set the border-image-width value to 30% when hovering the mouse over the element. In this case, the border will become 30% of the block size:

<div id="elem"></div>

#elem:hover {
	border-image-width: 30%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Example . Pixels

Let's set the border-image-width value to 50px when hovering the mouse over the element:

<div id="elem"></div>

#elem:hover {
	border-image-width: 50px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Example . The auto value

Let's set the border-image-width value to auto when hovering the mouse over the element.

Before hover, border-image-width has a value of 1 (default). In the example, border-width is specifically set to 52px, and border-image-slice is set to 26 (effect with auto will be observed only if border-width is not equal to border-image-slice). Due to the fact that border-image-width has a value of 1, the border image will occupy the entire width of border-width, that is, it will stretch by 52px. On hover, the border-image-width value will be set to auto and the width of the image will become equal to the border-image-slice value, that is, 26px:

<div id="elem"></div>

#elem:hover {
	border-image-width: auto;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 52px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

border-image-width property

Syntax

Values

Example . Number

Example . Let's change the border-image-repeat value to round

Example . Percentages

Example . Percentages

Example . Pixels

Example . The auto value

See also