JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dialog">
<p>У меня одно изображение,маленького размера."Разделяя" его</p>

<pre>border-image: url(/themes/standart/style.png) 158 10 10 128;</pre>
<p>и используя как бордюр получается большой отступ сверху и слева. Это происходит из за отступа,взятого для сохранения узора в верхнем левом углу.Если бы не этот узор,отступы бы делать не пришлось и все пошло бы как по маслу. Но легких путей не ищим.</p>
<p>Картинка,которую пытаюсь использовать как бордюр,прилагается</p>
</div>

CSS

.dialog {
    color: #fff;
    width: 50%;
    min-height: 220px;
    min-width: 220px;
    margin: 50px auto;
    padding: 0 10px;
    border: 3px double #860;
    border-top: 30px solid #860;
    border-image: url(https://htmlforum.io/uploads/monthly_2016_10/style.png.73551656e693a89db418aa45d971e58e.png) 158 16 16 128 fill repeat stretch;    
    border-image-width: 158px 16px 16px 128px;
    border-image-outset: 10px 0px 0px 25px;
}
.dialog:hover {
    border-image: none;
}