На сайте In Case of Stairs представлен on-line генератор кода для border-image. На основе загружаемой картинки создается превью и CCS3 свойства border-image с разными параметрами. Можно «на лету» визуально подобрать отступы и размеры.
Для тех, кто не знает про border-image рекомендую почитать замечательную статью Джона Рисига (John Resig), создателя jQuery.
Ниже представлен код для демонстрации, в котором используется сгенерированный этим сервисом CSS-свойство
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Border-image</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
#bb{
border-width: 65px 45px 58px 39px;
-moz-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
-webkit-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
}
</style>
</head>
<body>
<div id="bb">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar adipiscing sapien, vel semper diam pulvinar vitae. Nulla ipsum lorem, lacinia eu commodo semper, posuere sit amet arcu. Ut consequat adipiscing lorem sed pulvinar. Aliquam enim sapien, volutpat at dignissim quis, sodales sed nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.
Вот здесь можно посмотреть, что получилось.
Вот еще один пример
Жаль, что нельзя менять фон, на котором отображается превью и цвет отображаемого кода.
Нормально работает в FireFox 3.6 в Opera 10.5 в Chrome. В IE не работает
