Свойство border-image

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

Синтаксис

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):

html<div id="elem"></div>

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

Результат:

html<div id="elem"></div>

css#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, поэтому имеет смысл задавать ей подходящие стиль и цвет.

Значения

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

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

html<div id="elem"></div>

css#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

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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 для высоты:

html<div id="elem"></div>

css#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 оставим такой же. Ромбики растянутся на всю границу:

html<div id="elem"></div>

css#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, и центральная часть картинки станет фоном нашего блока:

html<div id="elem"></div>

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

Результат:

Пример

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

html<div id="elem"></div>

css#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). Обратите внимание на то, что сама граница не увеличилась, а картинка границы - да, так как она залезет под текст:

html<div id="elem"></div>

css#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):

html<div id="elem"></div>

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

Результат:

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