border-image

[LIFE-STALKER]

Здравствуйте Уважаемые форумчане.

Возникла проблема с border- image

Необходимо сделать div который будет со всех сторон окружен картинкой.

Использую такой код

-moz-border-image: url(border-image-bottom.gif) 30 round round;

-webkit-border-image: url(border-image-bottom.gif) 30 round round;

-o-border-image: url(border-image-bottom.gif) 30 round round;

border-image: url(border-image-bottom.gif) 30 round round;

Вроде все хорошо, но с левой и с правой стороны ничего не отображается, как это можно исправить?

Ссылка на пример http://jsfiddle.net/Q4xDQ/

Edited November 19, 2011 by LIFE-STALKER

[gurylyov]

LIFE-STALKER, если указываете фон для бордюров, нужно прежде указывать их ширину.

[LIFE-STALKER]

gurylyov можно поподробнее, я в этом новичок.Только учусь.

[psywalker]

gurylyov можно поподробнее, я в этом новичок.Только учусь.

Конечно же можно, лови

[LIFE-STALKER]

На выходу получил такой код

border-width: 3px;

-moz-border-image: url(border-image-bottom.gif) 3 repeat;

-webkit-border-image: url(border-image-bottom.gif) 3 repeat;

-o-border-image: url(border-image-bottom.gif) 3 repeat;

border-image: url(border-image-bottom.gif) 3 repeat;

но все равно изображения отображаются только по углам.

Меняю картинку на ту что показана в первом примере, она показывается только с 2-х противоположный друг другу сторон т.е. леваи и правая, или верхняя и нижняя

[gurylyov]

Эм... прежде, чем спросить браузер, сам потестил. У меня ведь такая же фигня в мозилле. Попробуйте сгенерировать нужный border-image с помощью этого сайта. Если не выйдет, просто используйте квадратную картинку. Тогда точно заработает.

[LIFE-STALKER]

Все работает.Но возникла проблема с кроссбраузерностью.

Вот такой код:

border-width: 3px;

-moz-border-image: url(/template/stalker/img/user/border-image.gif) 3 round stretch;

-webkit-border-image: url(/template/stalker/img/user/border-image.gif) 3 round stretch;

-o-border-image: url(/template/stalker/img/user/border-image.gif) 3 round stretch;

border-image: url(/template/stalker/img/user/border-image.gif) 3 round stretch;

В Google Chrome все отлично отображается,а в опере и мозилле не отображается, только углы.

[LIFE-STALKER]

Update

[gurylyov]

Если и с того сайта не работает, не знаю что посоветовать. Разве что отрисовать блок под блоком, если фиксированные размеры.