Чем в css заменить тег border-image или как вставить изображение через css?

Question

[Martyer]

Имеется sidebar, в нем n число блоков, размеры каждого блока разные.
Задача: чтобы после каждого блока стоял бордюр, но не тот что задаётся свойством border, а обычная картинка которая будет повторятся по оси y.
Могу трогать только css.
Пробовал через border-image, но картинка по углам разбегается, а в середине пустота + EI не поддерживает и сафари. Хотел задать блоку background с этой картинкой и сместить вниз, но вспомнил, что размеры блоков всегда меняются)
Ткните пожалуйста носом, где надо искать решение)

Answer 1

[Anton Filippov]

Это можно сделать через :before, :after

Comments

[Martyer]

Действительно, совсем из головы вылетели псевдо элементы.

Решил задачу так:

.widget ul:after {
  content: "";
  display: inline-block;
  background: url(/wp-content/themes/fashionistas/img/border-sidebar.png);
  background-repeat: repeat-x;
  width: 300px;
  height: 20px;
  margin-top: 20px;
}

Спасибо вам.