Тестируем CSS3 border-image

border-image Поддерживается не всеми броузерами, точнее точно не IE. Для Safary и Opera нужны, соответствующие префиксы -webkit- и -o-

Для начала, нам нужен файл с прозрачной основой, это для нас обеспечивает формат .png...

Вот, для понимания процесса, исходный файлразмеры файла 81x81 пикселя.

Теперь, синтаксис CSS3:

					
div{
	margin-bottom:20px;
	border:20px;
	-webkit-border-image:url( 'http://boka.id.lv/img/border-blue-wave.png') 28 stretch;
	-o-border-image:url( 'http://boka.id.lv/img/border-blue-wave.png') 28 stretch;
	border-image:url( 'http://boka.id.lv/img/border-blue-wave.png') 28 stretch;
}
					
				
важно, что нужно вписывать в CSS еще и ширину границы border:__px и это не смотря на то, что ширину берем с вырезки на картинке. И еще обычно фигурирующие в сети "30 30" сильно сбиваю с толку, а ведь это пиксели, и полноценно нужно записывать ширину для всех сторон обрезки исходного имеджа (30 30 30 30) - начиная с верха. Но в моем случае исходник квадрат со сторонами 81х81px значит берем просто 27. Но, на практике при этом появились ненужные артифакты, поэтому ставим 28px и все ок. Я использую stretch - т.е. растягиваю исходник, но можно и repeat. Пробуйте!