border-image

Пример

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

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

Определение border-image

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

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

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

Показ демо ❯

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

Поддержка border-image

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

Цифры, за которыми следуют -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-

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

Синтаксисborder-image

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

Значения border-image

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

Примеры border-image

Пример

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

#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;
}

Попробуйте сами »