[ErikPshat]

Усваиваем следующий урок... Делаем border-image.
Например из такого рисунка:

border.png

---

Ну и пишем такой код
И смотрим результат

Ну и пишем такой код
И смотрим результат

Ну и пишем такой код
И смотрим результат

Ну и пишем такой код
И смотрим результат

В чём фокус?
Изображение делится на 4 угла, 4 центральных части (без углов) и самого центра.

1. Мы параметром border: 28px; указываем размер отображаемой области рамки.
2. Следом параметром border-image: url(путь к картинке) указываем на саму картинку.
3. Затем к нему подставляем размеры каждой стороны изображения. Если они одинаковы, то выставляем одну цифру, если нет, то для каждой стороны.
4. Далее выставляем нужный из 3-ёх параметров дважды - по высоте и по ширине, действующих на центральную часть сторон:
   • stretch - растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
   • repeat - повторяет рисунок границы.
   • round - повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Да, тут есть такие особенности для разных браузеров:

• Firefox поддерживает свойство -moz-border-image.
• Safari, Chrome и iOS поддерживают свойство -webkit-border-image.
• Opera поддерживает свойство -o-border-image
• В будущем все браузеры должны стандартизироваться к общему свойству border-image

Поэтому в коде нужно просто повторить эти параметры для каждого браузера, через ;
Выглядеть код будет так:

[DECOR="; border: 28px;
-moz-border-image: url(https://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;
-webkit-border-image: url(https://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;
-o-border-image: url(https://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;
border-image: url(https://www.pspx.ru/forum/attachment.php?attachmentid=7195) 28 round round;"]

Подробнее...