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

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



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

danik.js,

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

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

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

danik.js,

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

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

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

рони,

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

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

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

<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