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