СSS Свойство border-image

❮ Назад CSS Справочник Вперед ❯

Пример

Укажите изображение в качестве границы вокруг элемента:

#borderimg {
border-image: url(border.png) 30 round;
}

Редактор кода »

Определение и использование

Свойство border-image позволяет указать изображение, которое будет использоваться в качестве границы вокруг элемента.

Свойство border-image - сокращенное свойство для:

Опущенные значения устанавливаются в значения по умолчанию.

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

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следуют -webkit-, -moz-, или -o- указывают первую версию, которая работала с префиксом.

Свойство
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

Примечание: См. раздел индивидуальная поддержка браузера для каждого значения ниже.

CSS Синтаксис

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

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

Свойство	Описание	Воспроизвести
border-image-source	Путь к изображению, которое будет использоваться в качестве границы
border-image-slice	Как разрезать изображение границы	Воспроизвести »
border-image-width	Ширина границы изображения
border-image-outset	Установить, с помощью которого область изображения границы выходит за пределы поля границы
border-image-repeat	Следует ли изображение границы повторять, округлять или растягивать	Воспроизвести »
initial	Устанавливает для этого свойства значение по умолчанию. Прочитать о initial
inherit	Наследует это свойство от родительского элемента. Прочитать о inherit

Примеры

Пример

Различные значения среза полностью изменяют внешний вид границы:

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}

Редактор кода »