Деление рисунка для рамки на области.
Свойство border-image-slice

– рамка 150x150 – деление на области

– рисунок для рамки 90x90 – деление на области

Задает размер областей рисунка для рамки.
Возможные значения border-image-slice:

• число - Значения, которые указывают в пикселях размеры частей рисунка для рамки, задавая тем самым области деления. Единицы (px) не пишутся, т.е. 30, а не 30px.
• % - Размеры частей рисунка в пикселях относительно размеров рисунка. Горизонтальные относительно ширины, вертикальные – относительно высоты.
• fill - Обозначает, что рисунок не обрезается внутренним краем рамки, а заполняет также область внутри рамки (задается вместе с числом или процентами).

Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

Рисунок рамки повторяется при border-image-slice: 50

Разное количество значений свойства border-image-slice

Исходный код этого примера:

<style>
    .wrap {
        margin-bottom: 20px;
    }
    .wrap div {
        width: 200px;
        height: 100px;
        line-height: 100px;
        display: inline-block;
        text-align: center;
        font-size: 18px;
        border-style: solid;
        border-image-source: url(border_image.png);
        border-image-width: 20px;
    }
    .wrap1 img {
        width: 300px;
        height: 400px;
        border: 50px solid;
        border-image-source: url(border_frame.png);
        border-image-slice: 50;
        border-image-repeat: repeat;
    }
</style>
<h2>Рисунок рамки повторяется при border-image-slice: 50</h2>
<div class="wrap1">
    <img src="image.jpg" width="300" height="400" alt="Портрет в раме">
</div>
<h2>Разное количество значений свойства border-image-slice</h2>
<div class="wrap">
    <div style="border-image-slice: 30;">30</div>
    <div style="border-image-slice: 30 15;">30 15</div>
    <div style="border-image-slice: 30 30 15;">30 30 15</div>
    <div style="border-image-slice: 30 45 30 15;">30 45 30 15</div>
</div>