Установка бордюра border-image

[sus]

Доброго время суток!
Прошу подсказку по выводу бордюра jpg.
Блок товара на странице категорий.. хотел сделать бордюр.
Прописал в глабал css

Код: [Выделить]

#columns {
  position: relative;
  padding-bottom: 50px;
  padding-top: 15px;
  background:url('../img/1201.jpg')  repeat;
 color: black;
 border-left: 20px solid White;
 border-right:20px solid White;
 border-top: 20px solid White;
 border-bottom:20px solid White;
  -moz-border-image: url('../img/1402.jpg') 20 20 20 20  repeat;
  -webkit-border-image: url('../img/1402.jpg') 20 20 20 20  repeat;
  -o-border-image: url('../img/1402.jpg') 20 20 20 20  repeat;
  border-image: url('../img/1402.jpg') 20 20 20 20  repeat;
   }
Все бы ничего, но верх и низ бардюр не выводиться..
Тоесть наследуется родитель а jpg не берется. Левый правый нормально.
Блок во вложении.
Подскажите почему.
Спасибо!

[DarinSr]

Сайт какой?

[sus]

 Сайт типровой, типовой шаблон 1.6.0.8
Страница котигорий.
Бордюры ставятся правый левый, верх низ ставятся но не забиваются jpg картинкой, цветом да.

[Миколас]

Если типовой то так

Код: [Выделить]

ul.product_list.grid > li {
    border: 2px solid red;   

[sus]

Спасибо большое!
Но вы наверное не так поняли или я не догоняю....
В глобал css есть..

Код: [Выделить]

#columns {
   position: relative;
  padding-bottom: 50px;
  padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
 color: black;
 border-left: 20px solid #ff0000;
 border-right:20px solid #ff0000;
 border-top: 20px solid #ff0000;
 border-bottom:20px solid #ff0000;
 
  }Установливает граници бордюр.
Так работает результат на вкладке.
Но при установке jpg

 

Код: [Выделить]

position: relative;
  padding-bottom: 50px;
  padding-top: 15px;
padding-left: 20px;
padding-right: 20px; 
  background: url('../img/1207.jpg')  repeat;
 color: black;
 border-left: 20px solid White;
 border-right:20px solid White;
 border-top: 20px solid White;
 border-bottom:20px solid White;
  -moz-border-image: url('../img/1408.jpg') 20 round round;
  -webkit-border-image: url('../img/1408.jpg') 20 round round;
  -o-border-image: url('../img/1408.jpg') 20 round round;
  border-image: url('../img/1408.jpg') 20 round round;
Блок

Код: [Выделить]

-moz-border-image: url('../img/1408.jpg') 20 round round;
  -webkit-border-image: url('../img/1408.jpg') 20 round round;
  -o-border-image: url('../img/1408.jpg') 20 round round;
  border-image: url('../img/1408.jpg') 20 round round;Устанавливает левый правый бордюр а верх низ не хочет..

В чем дело ?...

[Миколас]

Код: [Выделить]

border-style: solid;
border-width: 20px;
-moz-border-image: url(border.png) 20 repeat;
-webkit-border-image: url(border.png) 20 repeat;
-o-border-image: url(border.png) 20 repeat;
border-image: url(border.png) 20 fill repeat;Вот так добавляю стили и работает.

[sus]

Спасибо за пример!
Ставлю это в глобал

Код: [Выделить]

#columns {
   position: relative;
border-style: solid;
border-width: 20px;
-moz-border-image: url(../img/1408.jpg) 20 repeat;
-webkit-border-image: url(../img/1408.jpg) 20 repeat;
-o-border-image: url(../img/1408.jpg) 20 repeat;
border-image: url(../img/1408.jpg) 20 fill repeat;
  }
Результат тот-же, верха низа нет...
ПОдскажите вы в теме css в global.css ставите?
Я в ней ставлю..

[Миколас]

В global.css

Код: [Выделить]

#columns {
  position: relative;
  padding-bottom: 50px;
  padding-top: 15px;
 
  border-style: solid;
  border-width: 20px;
  -moz-border-image: url(../img/border.png) 20 repeat;
  -webkit-border-image: url(../img/border.png) 20 repeat;
  -o-border-image: url(../img/border.png) 20 repeat;
  border-image: url(../img/border.png) 20 repeat;
}

[Миколас]

Результат

[sus]

Спасибо большое Nikola!
Все правельно.. все работает.
Дело все в самом файле бордюра, я имею ввиду jpg или png.
Что-то тормознул на сам файл....
Еще один вопрос.. А можно как-то сделать загрузку двумя файлами. Один для левой правой, второй для верха низа.
Формат приведенный файла это по сути квадрат из бордыров в одном, верх низ право лево.
Загрузка одним файлом бордюра.
А по отдельноста можно.. Если указать так то не выходит
border.png - это верх низ
border1.png - право лево

Код: [Выделить]

-moz-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  -webkit-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  -o-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  border-image: url(../img/border.png ) 20 0 20 0 repeat;

-moz-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  -webkit-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  -o-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  border-image: url(../img/border1.png ) 0 20 0 20 repeat;
Как то так..
Спасибо!

[DarinSr]

С одним файлом с border-image, для разных файлов через background-image.

[Миколас]

Код: [Выделить]

-moz-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  -webkit-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  -o-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  border-image: url(../img/border.png ) 20 0 20 0 repeat;

-moz-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  -webkit-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  -o-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  border-image: url(../img/border1.png ) 0 20 0 20 repeat;Если так, то будет использовать только border1.png, а стили с border.png не бут учитываться. Делай с одним файлом.

[sus]

Да так оно и есть. Спасибо огромное! Всего доброго,удачки!
Вопрос закрыт.