JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dialog">
    <p>Художница нарисовала рамку диалога, для новой онлайн игры. Требуется сверстать её на прозрачном фоне, примерно вот так:</p>
    <ol>
        <li>Рамка должна растягиваться по высоте и ширине. Либо в зависимости от контента, либо при заданной ширине и высоте контейнера.</li>
        <li>Не обязательна поддержка IE.<span class="sbrace"> </span> <span class="hbrace">(</span>т.е. вы можете использовать любые современные CSS технологии: мультибекграунды, border-image и т.п)</li>
        <li>Чем меньше html-тегов тем лучше<span class="sbrace"> </span> <span class="hbrace">(</span>Надеюсь у вас получиться сделать что-то элегантнее чем таблица на 9 ячеек =)).</li>
        <li>Чем меньше отдельных файлов графики — тем лучше.</li>
        <li>Без яваскриптов</li>
        <li>Сам контейнер будет всегда с position:absolute<span class="sbrace"> </span> <span class="hbrace">(</span>это может упростить вам задачу)</li>
    </ol>
</div>

CSS

.dialog {
    position: absolute;
    color: #fff;
    top: 5%;
    left: 25%;
    right: 25%;
    padding: 50px 60px 60px;
    min-height: 220px;
    min-width: 220px;
}
.dialog::before, .dialog::after {
    content: '';
    position: absolute;    
    z-index: -1;
}
.dialog::before {
    content: '';
    position: absolute;   
    background: #1b2f4a;
    top: 120px;
    left: 100px;
    right: 100px;
    bottom: 140px;
}
.dialog::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-width: 120px 100px 140px;   
    -webkit-border-image: url(http://usabili.ru/news_imgs/151/border7.png) 120 100 140 100 repeat stretch;
    -moz-border-image: url(http://usabili.ru/news_imgs/151/border7.png) 120 100 140 100 repeat stretch;
    -ms-border-image: url(http://usabili.ru/news_imgs/151/border7.png) 120 100 140 100 repeat stretch; 
    -o-border-image: url(http://usabili.ru/news_imgs/151/border7.png) 120 100 140 100 repeat stretch; 
    border-image: url(http://usabili.ru/news_imgs/151/border7.png) 120 100 140 100 repeat stretch;
}