border-image

Поддержка браузерами


12.0+	11.0+	15.0+	16.0+	15.0+	6.0+

Описание

CSS свойство border-image используется для указания значений таких свойств, как: border-image-source, border-image-width, border-image-slice, border-image-outset и border-image-repeat в одном объявлении. Данные свойства можно использовать, например для создания красивых кнопок.

Если какое-либо значение было не установлено, то оно будет установлено в значение по умолчанию для соответствующего свойства.

Значение по умолчанию:	none 100% 1 0 stretch
Применяется:	ко всем элементам
Анимируется:	нет
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.borderImage="url(border.png) 30 30 round"

Синтаксис

border-image: source slice width outset repeat|inherit;

Значения свойства

Значение	Описание
border-image-source	Указывает путь к изображению, которое будет использоваться в качестве границ рамки.
border-image-slice	Смещение изображения границы внутрь.
border-image-width	Определяет ширину для изображения-границы.
border-image-outset	Указывается величина, на которую распространяется область изображения-границы за пределы границ элемента.
border-image-repeat	Определяет, как будет отображаться изображение, заданное для рамки: растягиваться, повторяться или масштабироваться.

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style type="text/css">
    div {
      border-width: 15px;
      width: 250px;
      padding: 10px 20px;
    }
    #round {
      border-image: url("border.png") 30 30 round;
    }
    #stretch {
      border-image: url("border.png") 30 30 stretch;
    }
  </style>
</head>
<body>

  <div id="round">Изображение повторяется для заполнения всей области.</div>

  <div id="stretch">Изображение растянуто, чтобы заполнить всю область.</div>

  <p>Здесь исходное изображение, которое используется в качестве границы:</p>
  <img src="border.png">

</body>
</html>

Результат данного примера в окне браузера: