Свойство border-image-width управляет шириной видимой части рамки, масштабирует ее. Если это значение больше ширины border-width, картинка рамки заползет под содержимое.

Для более подробной информации по картинкам для границы смотрите свойство border-image.

См. также border-image-source, border-image-slice, border-image-repeat, border-image-width, border-image-outset.

Синтаксис

селектор {
	border-image-width: CSS единицы | проценты | число | auto;
}

Значения

Число параметров Описание
CSS единицы Значение в заданных CSS единицах.
Проценты Значения в процентах относительно размера блока, которому задана граница.
Число Числовое значение, на которое умножается border-width.
auto Ключевое слово. Если оно задано, значение равно соответственному border-image-slice. Если подходящего размера нет, используется значение border-width, при этом картинка заполняет весь угол рамки, заползая под контент. Смотрите пример для лучшего понимания.

Значение по умолчанию: 1.

Примеры

Пример . Число

Установим значение border-image-width в 2 по наведению мышкой на элемент. При этом граница станет размером 26px*2 - в 2 раза больше, чем ее ширина, заданная в border-width. Граница при этом зайдет под текст (типа фона):

#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: 0px auto;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Пример . Изменим border-image-repeat на round

В предыдущем примере по наведению в границе будет не целое количество ромбиков. Исправим это, установив border-image-repeat в значении round:

#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: 0px auto;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Пример . Проценты

Установим значение border-image-width в 50% по наведению мышкой на элемент. При этом граница станет размером 50% от размера блока (то есть две границы, правая и левая, покроют собой весь блок):

#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: 0px auto;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Пример . Проценты

Установим значение border-image-width в 30% по наведению мышкой на элемент. При этом граница станет размером 30% от размера блока:

#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: 0px auto;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Пример . Пиксели

Установим значение border-image-width в 50px по наведению мышкой на элемент:

#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: 0px auto;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Пример . Значение auto

Установим значение border-image-width в auto по наведению мышкой на элемент.

До наведения border-image-width имеет значение 1 (по умолчанию). В примере специально border-width задано в 52px, а border-image-slice - в значении 26 (эффект с auto будет наблюдаться только если border-width не равно border-image-slice). Из-за того, что border-image-width имеет значение 1, картинка границы будет занимать всю ширину border-width, то есть растянется на 52px. По наведению значение border-image-width установится в auto и ширина картинки станет равна значению border-image-slice, то есть 26px:

#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: 0px auto;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

См. также примеры на свойство border-image.