# Свойство 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-outset`,
  которое задает сдвиг картинки для границы

← →
↑
en ru