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

Свойство `border-image` задает картинку для границы, оно является свойством сокращением для свойств `border-image-source`, `border-image-slice`, `border-image-repeat`, `border-image-width` и `border-image-outset`. При этом свойство-сокращение появилось в CSS раньше сокращаемых свойств и поэтому поддерживается в большем количестве старых браузеров.

## Синтаксис

`селектор { border-image: url(путь к картинке) смещение/толщина/сдвиг повторение; }`

## Описание

Картинка, которую мы хотим применить для границы, должна быть оформлена специальным образом: `4` мини картинки для уголков и `4` картинки для сторон. Пример такой картинки:

В данном случае центральная часть оставлена белой (так как мы не хотим, чтобы она попадала на фон элемента). Пример картинки с заполненной центральной частью:

Значение `slice` указывает браузеру, какие части картинки пойдут на уголки, а какие на стороны (а какая часть будет центральной). На уголки идут `4` части, на стороны идут `4` части и одна часть (центральная) идет на фон элемента (опционально, ключевое слово `fill`).

Картинка "разрезается" на кусочки следующим образом: для значения `slice` указывается от одного до четырех значений. Давайте разберем на примере. Пусть указаны следующие значения: `10 20 30 40` (пиксели px не указываются, это связано с тем, что картинка может быть и растровой и векторной). Значения говорят о следующем: `10` отрезать сверху, `20` отрезать справа, `30` отрезать снизу, `40` отрезать слева. Какая часть картинки попадет в левый верхний углок? Это будет кусочек: `10` сверху, `40` слева. В правый верхний уголок попадет `10` сверху, `20` справа. И так далее.

Чаще всего картинка симметричная (типа ромбиков выше) и нам нужно отрезать равные кусочки на уголки. В таком случае указывается одно значение, которое будет задавать одинаковые смещения со всех сторон. Чтобы отрезать оранжевые ромбики, мы укажем `slice` в `26` (так как оранжевый ромбик имеет размер `26px` на `26px`). Желтые ромбики попадут на линии границы и с ними произойдет следующее: они или растянутся на весь блок или будут повторяться вдоль границы (зависит от значения `repeat`):

`<div id="elem"></div>` `#elem { border-image-source: url("image.png"); border-image-slice: 26; border-image-repeat: stretch; border-style: solid; border-width: 26px; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

`<div id="elem"></div>` `#elem { border-image-source: url("image.png"); border-image-slice: 26; border-image-repeat: repeat; border-style: solid; border-width: 26px; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

Свойство `border-image` не позволяет указать толщину границы элемента. Браузер просто растягивает изображение вдоль границы с уже имеющейся шириной. Поэтому ее нужно задавать через свойство `border`.

Пользователи старых браузеров (или с отключенными картинками) увидят стандартную рамку, заданную в border, поэтому имеет смысл задавать ей подходящие стиль и цвет.

## Значения

Значение | Описание
--- | ---
url(Путь к картинке) | Путь к картинке. Подробнее смотрите `border-image-source`.
смещение | Указывает браузеру, какие части картинки пойдут на уголки, а какие на стороны (а какая часть будет центральной). Возможные значения: от `1`-го до `4`-х чисел | от `1`-го до `4`-х процентов. Через пробел может задаваться ключевое слово `fill` в дополнение к числам или процентам. Подробнее смотрите `border-image-slice`.
толщина | Свойство управляет шириной видимой части рамки, масштабирует ее. Если это значение больше ширины `border-width`, картинка рамки заползет под содержимое. Возможные значения: CSS единицы | проценты | число | `auto`. Подробнее смотрите `border-image-width`.
сдвиг | Интересное свойство, позволяющие отодвинуть рамку за пределы элемента. Отрицательные значения не поддерживаются. Возможные значения: CSS единицы (кроме % (?)) | положительное число | auto. Подробнее смотрите `border-image-outset`.
повторение | Указывает, как повторять картинку на границах (не на уголках): замостить или растянуть. Возможные значения: `stretch` | `repeat` | `round` | `space`. Подробнее смотрите `border-image-repeat`.

Значение по умолчанию: `none 100%/1/0 stretch` (url(путь к картинке) смещение/толщина/сдвиг повторение).

## Пример . border-image-repeat: значение repeat

`<div id="elem"></div>` `#elem { border-style: solid; border-width: 26px; border-image: url("image.png") 26 repeat; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Пример . border-image-repeat: значение stretch

`<div id="elem"></div>` `#elem { border-style: solid; border-width: 26px; border-image: url("image.png") 26 stretch; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Пример . border-image-repeat: значение round

Сейчас в нормальном состоянии установлено значение `repeat`, а по наведению - `round`. Обратите внимание что до наведения в границу помещается не целое количество ромбиков, а после наведения - целое. Так и работает `round`:

`<div id="elem"></div>` `#elem:hover { border-image: url("image.png") 26 round; } #elem { border-style: solid; border-width: 42px; border-image: url("image.png") 26 repeat; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Пример . border-image-repeat: два слова

Значение repeat для ширины и `stretch` для высоты:

`<div id="elem"></div>` `#elem { border-style: solid; border-width: 26px; border-image: url("image.png") 26 repeat stretch; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Пример . Совпадение ширины картинки с шириной границы

Увеличим `border-width` по наведению мышкой, при этом толщину `border-image` оставим такой же. Ромбики растянутся на всю границу:

`<div id="elem"></div>` `#elem:hover { border-width: 52px; } #elem { border-style: solid; border-width: 26px; border-image: url("image.png") 26 repeat; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Пример . border-image-slice

Возьмем другую картинку, в которой разные кусочки не равны:

Укажем, какие части от картинки нужно отрезать - `25% 30% 10% 20%`. Работает это так: `25%` - отступ сверху, `30%` - отступ справа, `10%` - отступ снизу, `20%` - отступ слева. По сути этими кусочками мы отрезаем уголки. Верхний левый уголок будет `25%` сверху картинки, и `20%` слева. Верхний правый уголок будет `25%` сверху картинки, и `30%` справа и так далее.

Также, если вы наведете мышкой на блок, то сработает ключевое слово `fill`, и центральная часть картинки станет фоном нашего блока:

`<div id="elem"></div>` `#elem:hover { border-image: url("image.png") fill 25% 30% 10% 20% stretch; } #elem { border-style: solid; border-width: 52px; border-image: url("image.png") 25% 30% 10% 20% stretch; width: 200px; height: 200px; margin: 0 auto; }`

:

## Пример

Сделаем градиентную границу с помощью линейного градиента:

`<div id="elem"></div>` `#elem { background: green; border-image: linear-gradient(to bottom, red, blue) 30; border-width: 30px; border-style: solid; width: 200px; height: 200px; margin: 0 auto; }`

:

## Пример . border-image-width

Установим значение border-image-width в `2` (картинка границы станет в `2` раза больше самой границы) по наведению мышкой на элемент (`26/2` - указали после слеша, при этом `26` - это значение `border-image-slice`). Обратите внимание на то, что сама граница не увеличилась, а картинка границы - да, так как она залезет под текст:

`<div id="elem"></div>` `#elem:hover { border-image: url("image.png") 26/2 repeat; } #elem { border-style: solid; border-width: 26px; border-image: url("image.png") 26 repeat; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Пример . border-image-outset

Установим значение border-image-outset в `3` по наведению мышкой на элемент. (26/1/2 - указали после второго слеша, при этом 26 - это значение border-image-slice, а - 1 - border-image-width):

`<div id="elem"></div>` `#elem:hover { border-image: url("image.png") 26/1/3 repeat; } #elem { border-style: solid; border-width: 26px; border-image: url("image.png") 26 repeat; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Смотрите также

- свойство `border-image-source`,
  которое задает путь к картинке для границы
- свойство `border-image-slice`,
  которое разбиение картинки для границы
- свойство `border-image-repeat`,
  которое повторение картинки для границы
- свойство `border-image-width`,
  которое задает размер картинки для границы
- свойство `border-image-outset`,
  которое задает сдвиг картинки для границы

←→
↑