Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО BORDER-IMAGE

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

Свойство border-image включает в себя следующие свойства:

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


11+

Синтаксис

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	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="block block-1"></div>
<div class="block block-2"></div>

HTML

.block {
    height: 50px;
    width: 50px;
    background: #f1f1f1;
    border: 10px solid transparent;
    padding: 15px;
    margin-bottom: 20px;
}
 
.block-1 {
    border-image: url(/images/border.png) 15 round
}

.block-2 {
    border-image: url(/images/border.png) 10 round
}

CSS

← Перейти к списку свойств