Назад
Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту




Наш Telegram бот: @htmlweb_bot

Рамка-изображение.
Свойство border-image

Рисунок для рамки – изображение для рамки (90 x 90)

Если указать только URL изображения, то это изображение шириной в заданную ширину рамки (в данном примере – 15px) просто станет по углам блока.

Если кроме URL изображения указать через пробел число, то тем самым определяются области деления изображения для рамки.


border-image: url(border_image.png);
border-image: url(border_image.png) 30;
Исходный код этого примера:
<style>
    .wrap {
        display: flex;
        justify-content: center;
    }
    .wrap div {
        width: 300px;
        text-align: center;
        border: 15px solid;
        margin: 0 30px;
    }
</style>
<div class="wrap">
    <div style="border-image: url(border_image.png);">border-image: url(border_image.png);</div>
    <div style="border-image: url(border_image.png) 30;">border-image: url(border_image.png) 30;</div>
</div>

.