Как из картинки сделать рамку для элемента

[dmitry111]

Как из нее сделать рамку для элемента, что-то вроде:



Правильно ли я понимаю, для создания подобного понадобится 8 элементов (4 на углы, 4 на стороны)?

[danik.js]

http://caniuse.com/#search=border-image

[dmitry111]

danik.js,

не это не вариант) Нужен хардкор))

Чтоб в ие работало

[danik.js]

Ну хардкор так хардкор. С чем именно проблемы то?

[dmitry111]

danik.js,

не могу найти в поисковиках как это все делают)
Нашел на htmlbook статью, там задавали бордер элементу, а на углы клепали картинки. Но данный способ здесь не применим, исходник -прозрачный png и затереть следы углов не получится.

Я просто никогда не делал подобные штуки, хотел бы узнать как)

[рони]

dmitry111,
может как вариант http://www.malsup.com/jquery/corner/

[dmitry111]

рони,

не надо с помощью css и картинки.
За вариант спасибо, взял на заметку

[danik.js]

Можно еще SVG/VML попробовать )

[dmitry111]

попробовать можно, но мне надо с помощью картинки)

[Deff]

<style>
#AB {
 width:190px;
 height:68px;
 border-width: 22px!important;
 border-width: 22px!important;
-moz-border-image: url(http://s1.uploads.ru/i/OSvPC.png) 16 repeat;  /* Firefox 4 */
    -webkit-border-image: url(http://s1.uploads.ru/i/OSvPC.png) 16 repeat;  /* Safari 5 и Chrome */
    -o-border-image: url(http://s1.uploads.ru/i/OSvPC.png) 25 repeat; /* Opera 10.5 */}
    border-image: url(http://s1.uploads.ru/i/OSvPC.png) 25 repeat; /* Opera 10.5 */}
</style>
<div id=AB></div>

http://htmlbook.ru/css/border-image