Свойство border-image-width

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

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

Синтаксис

селектор {
	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. Граница при этом зайдет под текст (типа фона):

<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;
}

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

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

<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;
}

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

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

<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;
}

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

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

<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;
}

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

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

<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;
}

Пример . Значение 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:

<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,
которое является сокращением для границы-картинки
свойство border-image-source,
которое задает путь к картинке для границы
свойство border-image-slice,
которое разбиение картинки для границы
свойство border-image-repeat,
которое повторение картинки для границы
свойство border-image-width,
которое задает размер картинки для границы
свойство border-image-outset,
которое задает сдвиг картинки для границы