Смотрите, если у вас фиксированная ширина блока, он залит одним цветом и, допустим, не сильно резная-вычурная рамка, то можно так:

.macho {
background: 
url(https://i.imgur.com/2NWDQ7n.png) 0% 0% no-repeat border-box, /*верх*/
url(https://i.imgur.com/9LdSO3N.png) 0% 100% no-repeat border-box, /*низ*/
url(https://i.imgur.com/ZKSIZP3.png) 0% 0% repeat-y #fff padding-box; /*середина*/
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
}

Что делаем: "расставляем" фон так, чтобы верх и низ "заходили" на рамку заданной толщины, а боковушки - нет. Таким образом можно вверху и внизу сделать какие-то красивости, которые не будут мешаться боковым частям.
Если блок "резиновый", то можно попробовать то же самое, только украшение повесить еще одной фоновой картинкой, их можно много сделать )
border-box - для "влезания" на территорию границы.
padding-box - для того, чтобы оставаться в границах "контента".

* * *

Псевдоэлементы :before и :after
Если используем их, то можно основную рамку задать как цветом, так и через border-image, а украшение - навесить на псевдоблоки и позиционировать в нужное место.
Но тут лучше будет не на обстрактном примере разбираться,а  на конкретном, т.к. для того, чтобы корректно использовать позиционирование - может, потребуется куда надо довесить еще position:relative  и так далее и тому подобное...
Так что на всевдоэлементы даю только наводку, не конкретное решение )

Отредактировано Шиповник (10.04.22 13:18)