Свойство border-image

Справочник:

Свойство

Характеристики свойства

В каких браузерах работает?


11.0+	15.0+	15.0+	3.0+	15.0+	2.1+	1.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	-	-	+

Для чего используется?

Позволяет задать рамку объекта загруженной картинкой. Для этого свойства ширина рамки управляется посредством border, при чем если для него установлено значение 0, то рамка отображаться не будет. Картинка заднего фона отображается внутри рамки.

Как правильно задавать?

border-image: URL-адрес;

Какие могут быть значения?

none - отключает рисунок, который выступает рамкой для объекта.
URL - путь к файлу, который формирует границы.
stretch - тянет картинку по всей длине или ширине объекта.
repeat - зацикливает отображение картинки по периметру объекта.
round - повторяет изображение и подгоняет его размер так, чтобы на одной стороне поместилось целое число картинок.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойства border-image</title>
  <style>
   div {
    border: 15px solid #40c4c8;
    padding: 10px;
    border-image: url(images/bg-image.png) 15 round round;
   }
  </style>
 </head>
 <body>
   <div>Такой способ вывода рамки применяется достаточно редко.
Так как широко используется картинки-бэкграунды и создание картинок
 с помощью программ, редакитрующих картинки.</div>
 </body>
</html>

Тип CSS свойства:

Границы